jQuery not selectors not working

Question

I have a problem with jQuery selectors:

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

In that code it works if I remove .not(".title, .content"). but if I add it, it just doesn't gets the click. I use live because usually the elements are added through .append(), except some ones. This is an example: http://jsfiddle.net/88w8N/ . Basically I want to handle click on the li element, but not if it clicks on the .title and .content divs. What I'm doing wrong? Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

You need to stop jQuery from triggering an event attached to the parent when the child is triggered.

You need to use jQuery's event.stopPropagation() function, which

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

In your code specifically: http://jsfiddle.net/88w8N/21/

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

UPDATE

To fix your "live" issue, try the following modification: 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();
});

edited May 23 '17 at 12:16

Community

1
1

answered Jan 04 '12 at 12:06

Ayman Safadi

11,502
1
27
41

Okay, for some reason I can't get `.on()` working with my code, but the jsFiddle, which basically is the same works perfectly... :/ – pmerino Jan 04 '12 at 12:23
jQuery's `.on()` function was introduced in version 1.7. What version are you using? – Ayman Safadi Jan 04 '12 at 12:28
I have jQuery v1.7.1 and jQuery UI 1.8.16 – pmerino Jan 04 '12 at 12:36
Did you check out my [jsFiddle](http://jsfiddle.net/88w8N/21/)? Because I made an adjustment to the your code as well. Instead of `.click().live('click', function(){`, I'm doing `.on('click', function() {`. – Ayman Safadi Jan 04 '12 at 12:41
yeah, but somehow `.on()` doesn't works when I use `.append()` – pmerino Jan 04 '12 at 12:44

score 0 · Answer 2 · edited Sep 09 '20 at 23:17

0

Try :not("...") instead of .not("...")

please double-check these links:

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

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

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

edited Sep 09 '20 at 23:17

Dharman

30,962
25
85
135

answered Jan 04 '12 at 11:34

Arrabi

3,718
4
26
38

I used the selector `$("ul.questions li:not(div .title)")` so I check if it works, but I can still click on the title and the click() action is still being called – pmerino Jan 04 '12 at 11:37

score 0 · Answer 3 · answered Jan 04 '12 at 12:06

0

You can use not selector instead of not function http://api.jquery.com/not-selector/

answered Jan 04 '12 at 12:06

Diode

24,570
8
40
51

jQuery not selectors not working

3 Answers3

UPDATE