按鈕單擊事件觸發錯誤的事件處理程序

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

Answer 2

從jQuery文檔：

默認情況下，大多數事件從原始事件目標冒泡到文檔元素。 在整個過程中的每個元素，jQuery調用已附加的任何匹配的事件處理程序。 處理程序可以通過調用event.stopPropagation（）來防止事件在文檔樹中進一步冒泡（從而防止這些元素上的處理程序運行）。 然而，附加在當前元素上的任何其他處理程序都將運行。 為防止這種情況，請調用event.stopImmediatePropagation（）。 （綁定到元素的事件處理程序的調用順序與它們綁定的順序相同。）

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

因此，您可以在按鈕單擊處理程序中調用event.stopPropagation() ，以便停止觸發div事件。

Answer 3

我相信我在不看代碼的情況下理解你的問題。 它聽起來像是來自點擊事件冒泡或傳播的問題。 下面是一個代碼示例和一個小提琴的鏈接供您測試：

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

在這個函數中，：

e.stopPropagation();

阻止click事件過濾到其父容器（在本例中為“testDiv”）並觸發其click事件。 您可以在下面的jsfiddle中測試它並自己查看：

測試小提琴

編輯：

在你的情況下：

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

將事件參數添加到click函數並阻止它傳播到父級。

希望這可以幫助。