jQuery不是选择器不起作用

Question

我对 jQuery 选择器有疑问：

$("ul.questions li").not(".title, .content").click().live('click', function(){
        $(".inspector").slideToggle();
        if($(this).hasClass("selected")) {
               $(this).removeClass("selected");
        } else {
               $(this).addClass("selected");
        }
});

在该代码中，如果我删除 .not(".title, .content")，它将起作用。但如果我添加它，它就不会得到点击。我使用live 因为通常元素是通过.append() 添加的，除了一些元素。这是一个例子：http://jsfiddle.net/88w8N/。基本上我想处理对 li 元素的点击，但如果它点击.title 和.content div，则不是。我做错了什么？谢谢！

Answer 1

你需要stop jQuery from triggering an event attached to the parent when the child is triggered。

你需要使用jQuery的event.stopPropagation()函数，它

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

具体在您的代码中：http://jsfiddle.net/88w8N/21/

$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
    e.stopPropagation();
});

更新

要解决您的“实时”问题，请尝试以下修改：http://jsfiddle.net/88w8N/25/

$("ul.questionssel").on('click', 'li', function() {

    //$(".inspector").slideToggle();
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    } else {
        $(this).addClass("selected");
    }
});

$("ul.questionsnosel").on('click', 'li', function() {
    //$(".inspector").slideToggle();
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    } else {
        $(this).addClass("selected");
    }
});

$("ul.questionssel li div, ul.questionsnosel li div").on('click', function(e) {
    e.stopPropagation();
});

Answer 2

你可以使用非选择器代替非函数 http://api.jquery.com/not-selector/

Answer 3

尝试:not("...") 而不是.not("...")

请仔细检查这些链接：

http://api.jquery.com/attribute-not-equal-selector/

http://api.jquery.com/not-selector/

http://api.jquery.com/category/selectors/