jquery - 在事件不起作用

Question

一个简单的问题：

当我使用

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

一切正常，但如果我使用

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

没有任何工作。有什么解释吗？

Answer 1

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

Demo1：在这种情况下它不起作用，因为代码在 dom 中没有准备好

Answer 2

主要原因是当您运行第二个代码片段时，这些元素还不存在，因此找不到它们，因此它们没有被连接起来。第一个代码片段在看到点击之前不会查找它们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 ，则第二个会在该元素存在之前绑定，因此它不会绑定。