Question

我正在使用bootstrap来创建堆叠药丸导航控件。控件中的每个条目都是一个链接，该链接元素还包含一个按钮。可以单击该按钮以删除列表条目，或者可以单击列表条目本身以对其执行某些操作。

每个列表条目的html如下所示：

<li>
    <a href="#" id="launch_me">Some title
        <button class="my-class" id="remove_me">
             <i class="icon-remove"></i>
        </button>

    </a>
</li>

这些项目是根据服务器的响应动态添加的。然后，jquery通过以下方式添加单击处理程序：

$("#launch_me").click((function (info) {
    return function () {
        launch(info);
    };
})(myInfo));

$("#remove_me").click((function (info) {
    return function () {
        remove(info);
    };
})(myInfo));

当我点击按钮删除条目时，会触发“删除”点击例程，然后启动例程。

如何点击删除按钮只会导致删除点击处理程序？

谢谢！

Answer 1

试试这个：

$("#remove_me").click((function (info) {
    return function (e) {
        e.stopPropagation();
        remove(info);
    };
})(myInfo));

http://api.jquery.com/event.stopPropagation/

这将阻止“Remove Me”按钮的click事件冒泡到其父“Launch Me”容器并执行其click处理程序。

你之前：http://jsfiddle.net/HVExt/

开采后：http://jsfiddle.net/HVExt/1/

Answer 2

MyInfo看起来很狡猾。我会跳过它并添加;代替。但后来我不知道你的其余代码......

对于链接内的按钮，单击事件将触发两次

2 个答案: