為什么 jquery 事件委托不起作用？

Question

我有以下 html：

        <ul id="contain">
         <li class="active_one"></li>
         <li class="two"></li>
        </ul>

以及以下jquery：

$contain = $('#contain'); //going to use a lot

$contain.on('click','li.two', function(){
                console.log('working');
                //plus do other stuff
                });

以上不起作用，但是當我將其更改為：

$('body').on('click','li.two', function(){
                    console.log('working');
                    //plus do other stuff
                    });

然后它起作用了，但我知道最好的做法是盡可能接近我嘗試使用的父元素，但是每次我嘗試這樣做時，我顯然都做錯了，因為我的父級選擇器不工作。

Answer 1

這意味着#contain本身不是靜態元素，您應該選擇元素的最接近的靜態父元素。 否則 jQuery 不會選擇元素並且委托失敗。

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用 .on() 時，它們必須存在於頁面上。

但是，如果該元素是靜態的，那么您過早地選擇了該元素，您應該等待 DOM 准備就緒。

$(document).ready(function(){
   var $contain = $('#contain'); //going to use a lot
   $contain.on('click','li.two', function(){
       console.log('working');
       //plus do other stuff
   });
})

Answer 2

所以，我將嘗試解釋 jquery on(change) 是如何工作的，

如果你有

$(document).on('parameter 1','parameter 2', function(){} )

本質上，jquery 會檢查parameter 1提到的事件是否被執行。 然后它會檢查parameter 2是否存在，

如果是，那么它將檢查parameter 1中提到的事件是否在parameter 2提到的元素中被觸發。 因此，您可以在文檔更改時阻止 on(change) 事件。

這將幫助您通過確保加載的 elem 具有 id 然后將事件單獨綁定到該 id 來綁定動態加載的元素。 每當發生文檔事件時，就會執行動態事件。