CODEWITHSUNDEEP
javascriptjquery
jamie-wilson
jamie-wilson

Reputation: 1925

jQuery bind click firing immediately

I have a drop down menu, and clicking the icon should add the class "Open" to its parent, and then clicking the menu anywhere should close it. But the function inside the bind fires when the icon is clicked. The effect being it adds the class Open, and then removes it straight away.

This is probably a simple issue, but I cannot seem to work out why the 'click' event fires straight away!?

This question may be similar but can't still can't work it out: jQuery bind event firing the event

$(function () {

    $(".ui-dropdown-action").bind("click", function () {
        $(this).parent()
            .addClass("Open")
            .bind("click", function () {
                $(this).removeClass("Open");
            });
    });

});

Upvotes: 3

Views: 4463

Answers (4)

Oleg
Oleg

Reputation: 1140

In my case, when I use something like this

$("#modal .button")[0].click(() => console.log('test'))

its doesnt work and seems like click firing immediately

Solution for me was:

const button = $("#modal .button")[0];
$(button).click(() => console.log('test'));

Upvotes: 0

Mark
Mark

Reputation: 5720

I think you might have a problem with the click event bubbling up the DOM tree. Which is why click is also being fired on the parent.

if you pass in the event object as an argument for the first bind and call event.stopPropagation() as follows

$(function () {

  $(".ui-dropdown-action").bind("click", function (event) {
    event.stopPropagation();
    $(this).parent()
        .addClass("Open")
        .bind("click", function () {
            $(this).removeClass("Open");
        });
  });

});

should fix your issue.

Upvotes: 8

f1sherman
f1sherman

Reputation: 452

It is firing right away because the click event is bubbling to the parent and then firing that selector. To fix this you could use a setTimeout() around the 2nd bind.

$(function () {
  $(".ui-dropdown-action").bind("click", function () {
    var parent = $(this).parent();
    parent.addClass("Open");
    setTimeout(function() {
      parent.bind("click", function () {
        $(this).removeClass("Open");
      });
    }, 0);
  });
});

Another option would be to to a stopPropagation() on the event on your first bind, though that would prevent any other handlers from triggering on that event.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You can pass the event argument and stop the bubbling of the event .. Try this

$(function () {

        $(".ui-dropdown-action").bind("click", function () {
            $(this).parent()
                .addClass("Open")
                .unbind().bind("click", function (e) {
                    $(this).removeClass("Open");
                    e.stopPropagation();
                });
        });

    });

This will make sure the parent event will not fire when the icon is clicked.. Also every single time you click the icon the event for the parent is bound again which will create multiple click events .. Need to make sure you unbind and bind them again to avoid that..

Upvotes: 0

Related Questions