javascript - jq事件委托失败，是选择器的问题？疯掉……

Question

html

<ul id="nb">
    <li>你是</li>
    <li>你是</li>
    <li>你是</li>
    <li>你是</li>
    <li>你是</li>
    <li>你是</li>
    <li>你是</li>
</ul>

jq绑定click事件,想给li绑定点击事件

$('#nb').on('click','#nb>li', function () {
        console.log(1);
    });

问题：为何绑定失败？难道是选择器问题？

事件委托不能用子代选择器？已经弄了2个小时，脑袋晕晕的~~~

jq用的是1.11

Answer 1

选择器

断点查看源码

按照你的代码断点jQuery源码

最后总结一点 遇到问题调试 你就会发现源码内部工作原理 有利于你理解 他的原理 以后使用它坑就越来越少了！

Answer 2

$('#nb').on('click','li', function () {
        console.log(1);
    });

Answer 3

还是建议找个靠谱点的教程看看或者好好看看文档吧，事件委托是把事件监听挂到父元素上，然后选择器直接写（父元素下的）子元素就可以了，所以如果是：

$("#nb").on("click", "li", function(e){
    console.log("click!")
});

这么写的话，翻译成大白话就是：

在id为"nb"的dom元素上监听"click"事件，如果是在“li”上发生的就去执行function。

另外除了jQ，也去看看事件模型，起码要说的清楚事件冒泡和事件捕获是怎么回事~

---

补充：

回复里题主提到需要需要排除嵌套的情况，我觉得并不需要都写到选择器上，直接在回调里加个判断就行了：

$("#nb").on("click", "li", function(e){
    if ($(this).parent().is('#nb')) {
        console.log("click!");
    }
});

Answer 4

今天我刚看了一个文章，你可以看看http://segmentfault.com/p/121...

Answer 5

可以不用on的

$("#nb").find("li").click(function(){
    //...
})

我测试的时候，换成'ul>li'也不行，$('#nb>li')就可以

Answer 6

$('#nb').on('click','li', function () {

    console.log(1);
});