jQuery的：如何确保事件处理程序连接到所有相关的元素在DOM

Question

我在index.html近六成过滤器按钮，每个都连有$().click()事件处理程序。

$(document).ready(function() { 
    $('.filter_button_class').click(function(e) { 
     console.log("filter button clicked"); 
     e.preventDefault(); 
    }); 
}); 

在我的CSS文件中，:active选择确保被点击时，它的过滤器按钮会变成蓝色。

现在的代码工作正常，大部分的时间。当浏览器首次加载index.html时，事件处理程序似乎都正确连接，代码始终按预期工作。这是一个单页的应用程序，所以当用户点击后退按钮返回到index.html在过滤器上的一个按钮再次点击，它确实会变成蓝色，但.click()处理程序中的代码有时不执行。

我怀疑这可能是因为当index.html被重新加载，用户点击过滤器按钮前，不是所有的点击处理得到重视。但是当用户再次点击相同的过滤器按钮（总共两次）时，处理程序通常会执行。

问题有没有办法让代码在click()之内等待执行，直到所有的事件处理程序被首先连接？

而不是.click()我自己也尝试.on()但这并没有影响。也可能是我所识别的问题（事件处理程序附加到元素太慢）是错误的，但我当然会很感激任何反馈。

Answer 1

我可以看到所描述的行为的唯一解释是，HTML是如此之大，它需要一段时间的浏览器来完成解析，并创建DOM。虽然这样做，它会部分渲染页面。通过使用ready，你告诉jQuery你不希望你的回调中的代码被调用，直到该过程完成。这给用户留下了一个（小）机会窗口，用户可以看到一个按钮并在点击处理程序被附加之前单击它（因为DOM解析仍在进行，所以ready回调尚未触发）。这符合描述的症状，特别是第一次点击不起作用（ready还没有开启），但后来的一次（同时触发了ready）。

如果这是发生了什么，你可以使用事件代表团不等待ready回调避免：

$(document).on("click", ".filter_button_class", function() { 
    // ...handle the click... 
}); 

挂接上document一个单击处理程序，将只被解雇如果点击通过了.filter_button_class元素。如果确实如此，那么您的处理程序名为，好像您已将该事件挂钩在该元素上。

这涉及到违反脚本规则之一，即在关闭</body>标记之前将它们放在HTML末尾。相反，特别是因为我们正在处理所造成的HTML的大小和DOM构建时间的问题，我们会打破这种规则，并把script标签有问题的内容上面：

<script src="jquery.js"></script> 
<script src="yourcode.js"></script> 
<!-- problematic (large) content --> 

再次，正常我们不会这样做，因为它使得DOM解析器等待脚本被提取，但在这种情况下，作为对已知问题的响应，没有问题。 （只要确保启用缓存和工作。）

你可以看到this fiddle通过（使用ready）比较this fiddle效果（使用委派的前期处理，然后还可以通过添加ready直接处理）。首先，如果你很快，你可以点击一个按钮，让它不显示任何东西。第二，如果你很快，你可以点击一个按钮，只获得“委托：”消息，但稍后如果你点击你会得到一个“直接：”消息，然后是“委托：”一个。