javascript - 使用jquery多次点击按钮问题

Question

我有以下 html。我已经实现了以下 jquery 代码，但是我的删除按钮点击了两次。基本上是一次编辑和一次删除。当我点击编辑时，只发生一次点击，但是当我点击删除时，首先删除按钮触发器然后编辑。我​​怎样才能避免这种情况。请检查我的代码。

$(".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

您在 span(删除按钮)上的点击事件冒泡并触发 .tools 元素上的点击事件，这是您的编辑按钮。

您可以使用 event.stopPropagation() 防止事件冒泡。 :

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

旁注:.live() 从 jQuery 1.7 开始被弃用，取而代之的是 .on()。