按钮单击事件触发错误的事件处理程序 [英] button click event triggering wrong event handler

问题描述

我有一个div显示一些可点击的音乐标题。单击它时，它将显示更多详细信息。然后我在可点击的div中也有一个按钮。当我点击按钮。它不会调用按钮的功能而是调用div的功能？有办法解决这个问题吗？谢谢！

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

推荐答案

它被称为'冒泡'。按钮位于div内部，因此它正在执行按钮，然后向上链接到div。在按钮功能中添加event.stopPropagation（）。

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

这篇关于按钮单击事件触发错误的事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！