Question

我有以下html.I已经实现了以下jquery代码，但我的删除按钮单击两次。基本上一个编辑和一个删除。当我点击编辑只有一个单击发生，但当我点击删除，首先删除按钮trigers然后编辑。如何避免这种情况。请检查我的代码。

$(".tools").live("click", function(e){
    e.preventDefault();
    alert('clicked on edit');
    var n = $("a", this).attr('id');
    alert(n);
});

$(".tools").find('span').live("click", function(e){
    e.preventDefault();
    alert('clicked on delete');
    var n = $("a", this).attr('id');
    alert(n);
});

<div class="tools">
    <a href="#" class="btn acebtn btn-minier btn-info" id="edit_'."$count".'">
        <i class="icon-only ace-icon fa fa-share"></i>
    </a>
    <span class="dlt">
        <a href="#" class="btn acebtn btn-minier btn-info dlt" id="delete_'."$count".'">
            <i class="icon-only ace-icon fa fa-share"></i>
            delete
        </a>
    </span>
</div>

Answer 1

您在搜索范围内的点击事件（删除按钮）正在冒泡并触发.tools元素上的点击事件，这是您的编辑按钮。

您可以使用event.stopPropagation()阻止事件冒泡：

$(".tools").find('span').live("click",function(e){
    e.preventDefault();
    e.stopPropagation();
    alert('clicked on delete');
});

旁注：自{jQuery 1.7}起，.live()已被弃用，赞成.on()。

Answer 2

将$(".tools").unbind('click')放在$(".tools").live("click",function(e){...之前这是：

$(".tools").unbind('click');
$(".tools").live("click",function(e){ ....
//your script here

使用jquery多次点击按钮问题

2 个答案: