2

我有一个 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);
            });
4

3 回答 3

5

它被称为“冒泡”。该按钮位于 div 内，因此它正在执行按钮，然后沿着链向上到达 div。在按钮函数中添加 event.stopPropagation()。

$("#"+comListID+"btn").click(function(event){
    event.stopPropagation();
    addNewArr(comListID);
});
于 2012-12-13T21:51:25.957 回答
3

来自 jQuery 文档：

默认情况下，大多数事件会从原始事件目标冒泡到文档元素。在此过程中的每个元素处，jQuery 都会调用任何已附加的匹配事件处理程序。处理程序可以通过调用 event.stopPropagation() 来防止事件在文档树中进一步向上冒泡（从而防止这些元素上的处理程序运行）。但是，附加在当前元素上的任何其他处理程序都将运行。为了防止这种情况，请调用 event.stopImmediatePropagation()。（绑定到元素的事件处理程序的调用顺序与它们绑定的顺序相同。）

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

因此，您将event.stopPropagation()在按钮单击处理程序内部调用，以阻止 div 事件触发。

于 2012-12-13T21:52:41.540 回答
2

我相信我在没有看到代码的情况下理解了您的问题。听起来问题源于点击事件冒泡或传播。以下是要尝试的代码示例和指向小提琴的链接供您测试：

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

防止点击事件过滤到其父容器（在本例中为“testDiv”）并触发其点击事件。您可以在下面的 jsfiddle 中对其进行测试并亲自查看：

测试小提琴

编辑：

在你的情况下：

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

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

希望这可以帮助。

于 2012-12-13T21:55:48.277 回答