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中测试它并自己查看：

Test Fiddle

修改

在你的情况下：

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

将事件参数添加到click函数并阻止它传播到父级。

希望这有帮助。

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

3 个答案: