在事件不起作用

Question

一个简单的问题：

当我使用

$(document).on('click', '.btn-del-top', function(e) {}) 

everyhing工作，但如果我用

$('.btn-del-top').on('click', function(e) {}) 

什么work.Is有一些解释？

Answer 1

这可能是因为btn-del-top元素是动态创建的，或者是在$('.btn-del-top').on('click', function(e) {})代码执行后创建的。

Demo1：在这种情况下，它不工作，因为代码不是内部DOM准备

Answer 2

主要的原因是，当你运行第二个代码片段，这些元素都还不存在，所以他们AREN没有发现，所以他们没有迷上。第一个代码片段在看到document（例如，可能晚得多）的点击之前不会查找它们。

的原因他们都没有发现可能会有所不同：

1. 如果你的代码，寻找他们是在脚本标记他们在HTML定义，其中以上，他们不会存在。例如：

   <!-- Won't work, the element doesn't exist when you look for it --> 
   <script> 
   $('.btn-del-top').on('click', function(e) {}) 
   </script> 
   <span class="btn-del-top">...</span> 
   

   但是：

   <!-- Will work, the element exists when you look for it --> 
   <span class="btn-del-top">...</span> 
   <script> 
   $('.btn-del-top').on('click', function(e) {}) 
   </script> 
   

   和：

   <!-- Will work also work, jQuery will call your code later when 
       all elements in the markup have been created --> 
   <script> 
   $(function() { // shortcut for `$(document).ready(...)` 
       $('.btn-del-top').on('click', function(e) {}) 
   }); 
   </script> 
   <span class="btn-del-top">...</span> 
   

2. 如果使用代码创建它们后，他们将不早当您尝试勾存在他们了。

Answer 3

如果您要动态添加.btn-del-top，则第二个在该元素存在之前绑定，因此它不绑定。