在哪里放置 jquery 文件，包括事件处理程序答案

【问题标题】：Where to put jquery files including event handlers在哪里放置 jquery 文件，包括事件处理程序
【发布时间】：2016-07-14 11:54:11
【问题描述】：

我知道这可能很愚蠢，但一如既往地感谢您的帮助：

我有一个包含一个事件处理程序的 pre.js 文件

$('#soon_tasks_header').click(function(){ $('#soon_tasks_content').slideToggle() ; })

在 application.js 中是必需的

     //= require pre

点击#soon_tasks_header 不会切换滑动它，但是，将代码放在浏览器的 jQuery 控制台中可以正常工作。

注意：

当我在我的 pre.js 文件中测试它时，它运行良好：

$(document).ready(function(){
alert('aaaa') })

我想我搞砸了一些基本的东西，即导入 jquery 文件，何时何地。

【问题讨论】：

【解决方案1】：

这里要理解的重要一点是，在页面中存在这些 DOM 元素之前，无法安装 DOM 元素上的事件处理程序。如果您在页面加载器解析页面的那部分之前过早安装它们，那么 jQuery 将不会在页面中找到任何匹配的元素，并且不会附加任何事件处理程序。

有多种方法可以确保在页面中出现 DOM 元素之前，不会实际执行安装事件处理程序的代码。

如果您不控制<script> 标签的位置，或者由于您的环境，将所有<script> 标签放在<body> 标签的末尾很复杂，那么您可以只使用$(document).ready()像这样：

$(document).ready(function() {
    $('#soon_tasks_header').click(function(){ 
        $('#soon_tasks_content').slideToggle() ;
    })
});

而且，只要 jQuery 已经被首先加载，无论你在哪里包含你的脚本标签，这都会起作用。

【讨论】：

在渲染内容时，我失去了slideToggle功能，这意味着$(document).ready()不再被调用，所以我想我会怀疑放置
@KamalG'ool - 任何时候重新创建#soon_tasks_header 对象时，前一个对象上的任何事件处理程序都将丢失。对于动态创建的内容，您可以使用委托事件处理，将事件处理程序附加到静态父级，并且该父级侦听其子级的事件。可以动态创建或重新创建子级，并且委托的事件处理程序将继续工作。更多解释见stackoverflow.com/questions/9814298/…。
@KamalG'ool - 这回答了你的问题吗？如果是这样，请检查答案左侧的绿色复选标记，以向社区表明您的问题现已得到解答，并通过遵循正确的程序为自己赢得一些声誉积分。如果这没有回答您的问题，那么请评论它仍然缺少什么，以便可以编辑答案以完成它。

【解决方案2】：

我把它放在里面

$(document).ready(function(){

$('#soon_tasks_header').click(function(){ 
    $('#soon_tasks_content').slideToggle() ;
    });
 })

而且效果很好。谢谢。

【讨论】：