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本身不是静态元素，您应该选择最接近 static 元素的父元素。否则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，来帮助您绑定动态加载的元素。并且每当发生文档事件时，都会执行动态事件。

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

2 个答案: