为什么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
   });
})