javascript - jQuery bind click firing immediately - Stack Overflow

admin管理员组

文章数量:1313347

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");
            });
    });

});

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");
            });
    });

});

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 12:14 CommunityBot 111 silver badge asked Sep 23, 2012 at 22:12 jamie-wilsonjamie-wilson 1,9252121 silver badges3838 bronze badges 3

• Have you tried on() instead of bind()? On works differently to bind and I have had similar issues using bind. Also On is now prefered to bind. – Zappa Commented Sep 23, 2012 at 22:14
• Suggested reading: MDN examples on Event Propagation – bfavaretto Commented Sep 23, 2012 at 22:15
• As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. – Aesthete Commented Sep 23, 2012 at 22:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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.

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..

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.

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'));

本文标签： javascriptjQuery bind click firing immediatelyStack Overflow