button click event triggering wrong event handler

Question

I have a div display some titles of music which is clickable. When you click it it will show some more detail information. Then I also have a button in the clickable div. When I click the button. It won't call the function of the button but the function of the div? Is there a way to solve this? Thank you!

$("#myComList").append("<div id="+comListID+" class=listDiv> <p class=comTitle><? echo $row["compositionTitle"] ?>(<?echo $row["year"]?>)</p><button id="+comListID+"btn class=addNewArrBtn>Add new Arrangement</button> <p class=comOri>BY <? echo $row["OrigComposer"] ?></p> </div>");
        $('#'+comListID).click(function() {
              $(this).find("li").slideToggle('slow', function() {
            });
        $("#"+comListID+"btn").click(function(){
                addNewArr(comListID);
            });

I add my code for this part

lancellx
– lancellx

2012-12-13 21:48:51 +00:00
Commented Dec 13, 2012 at 21:48 — lancellx
– lancellx, Commented Dec 13, 2012 at 21:48

Syon · Accepted Answer · 2013-12-17 19:55:07Z

5

It's called 'bubbling'. The button is inside the div so it's executing button then up the chain to div. Add event.stopPropagation() inside the button function.

$("#"+comListID+"btn").click(function(event){
    event.stopPropagation();
    addNewArr(comListID);
});

edited Dec 17, 2013 at 19:55

answered Dec 13, 2012 at 21:51

Syon

1,61413 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

radbyx Over a year ago

The method is spelled "stopPropagation".

rmobis · Accepted Answer · 2012-12-13 21:52:41Z

From jQuery documentation:

By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)

http://api.jquery.com/on/

So you'd call event.stopPropagation() inside the button click handler, as to stop the div event from firing.

War10ck · Accepted Answer · 2012-12-13 21:55:48Z

I believe I understand your question without seeing the code. The problem it sounds like stems from the click event bubbling or propagating up. Below is a sample of code to try and a link to a fiddle for you to test:

<div id="testDiv" onclick="alert('Stop Clicking Me!');">
    <button type="button" onclick="function(e) { alert('You hit the button!'); e.stopPropagation(); }">Click Me!</button>
</div>

In this function, the:

e.stopPropagation();

prevents the click event from filtering up to its parent container (in this case "testDiv") and triggering its click event as well. You can test it and see for yourself in the jsfiddle below:

Test Fiddle

EDIT:

In your case:

$("#"+comListID+"btn").click(function(e){
    addNewArr(comListID);
    e.stopPropagation();
});

add the event parameter to the click function and stop it from propagating to the parent.

Hope this helps.

Collectives™ on Stack Overflow

button click event triggering wrong event handler

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related