在事件不起作用

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，則第二個在該元素存在之前綁定，因此它不綁定。