Question

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

});

Answer 1

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.