event handler handles selector twice

Question

I have this kind of handler

$(".mydiv").on('click', function(e){

// some logic
$(this).toggleClass('active');

//other logic

});

I have a bug where this event is triggered twice, and I see that on the first run this is ".mydiv" and on the second run this is ".mydiv.active" and it seems that ".mydiv.active" is added during the event handling to the list of nodes that match the selector

Is there a way around this?

This is the fuller code:

$(".filter_view:not(.mobile-view) .filter_content .cat, .filter_view:not(.mobile-view) .filter_content .check_area, .mobile-view .search_filter").on("click", function(e){
        debugger;

        $(this).toggleClass("active");
                e.stopPropagation();

// rest of the logic

});

<span class="check_area col-xs-4 col-md-2">
    <input class="filter_checkbox" id="Neve" name="Neve" type="checkbox" value="Neve"> 
    <label class="filter_checkbox_label" for="Neve">Neve</label>
</span>

Basically, the parent is .filter_view, but on mobile it has a .mobile-view class, so on mobile I want the search_filter to do the logic and on not mobile when clicking on the check_area (which is checkbox + label) and on .cat (category)

When checking the event on the first and second triggers, the first target is the label (what I clicked) yet the 2nd time the target is the checkbox (which I didn't click)

Even though I stopped propagation, could it be that bootstrap (or some other framework lib) has an event of when a label is clicked the checkbox is click()ed as well?

@ArunPJohny is most likely spot on. The only way an event handler will be executed twice is if it is being called twice, usually because the code that assigns it is run twice. — Reinstate Monica Cellio, Sep 03 '14 at 08:32
Add a console logging before `$(".mydiv").on('click', function(e){` and see whether the message is logged twice.. — Arun P Johny, Sep 03 '14 at 08:32
I added logging, the handler is called once. Using inspect the events registered to that node is only one event — Nick Ginanto, Sep 03 '14 at 08:36
We'll need to see markup then, as what you've got above shows nothing that can help you. — Reinstate Monica Cellio, Sep 03 '14 at 08:43
ok, I tried to simplify it, I will add the markup and full selector — Nick Ginanto, Sep 03 '14 at 08:45
`cat`s are spans under common parent .filter_content. it is not directly related to check_area — Nick Ginanto, Sep 03 '14 at 09:00
does "check_area" have a parent class(in the whole DOM) in the onclick selector list? — Vizard, Sep 03 '14 at 09:47

score 0 · Answer 1 · answered Sep 03 '14 at 08:29

0

try

$(".mydiv").on('click', function(e){

// some logic
$(this).toggleClass('active');

e.stopPropagation();

});

stopPropagation() prevents bubbling of the event.

answered Sep 03 '14 at 08:29

Vizard

303
1
8

I've stopPropagation, before and after toggleClasses doesn't work – Nick Ginanto Sep 03 '14 at 08:35

score 0 · Answer 2 · answered Sep 03 '14 at 08:31

0

Add $(".mydiv").off('click'); before you bind the click event, the code you showed us is probably being called twice, which binds the event handler twice. Maybe you have it in an init() function which is called more than once?

answered Sep 03 '14 at 08:31

caffeinated.tech

6,428
1
21
40

There is a slim chance the event is being fired twice: http://stackoverflow.com/a/10727036/2295592 – caffeinated.tech Sep 03 '14 at 09:16

event handler handles selector twice

2 Answers2