按钮单击事件触发错误的事件处理程序

Question

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

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

Answer 1

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

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