javascript - 防止$('img').click触发多次

Question

我想知道如何防止多次提示确认消息，在此先感谢!

JavaScript

$('img.delete').click(function () {         
    if(confirm("This selected record will be deleted. Are you sure?")){
        //Do something...
    }
});

html

<tbody>
    <tr>
        <td><img class="delete" src="/images/delete.gif"><input value="708" type="hidden"></td>
        <td>aaa</td>
    </tr>
    <tr>
        <td><img class="delete" src="/images/delete.gif"><input value="595" type="hidden"></td>
        <td>bbb</td>
    </tr>
    <tr>
        <td><img class="delete" src="/images/delete.gif"><input value="19" type="hidden"></td>
        <td>ccc</td>
    </tr>
</tbody>

Answer 1

您的代码中的问题是您多次应用了点击处理程序；从您发布的代码中看不到这一点，但这绝对是原因。

如果多次运行 $('img.delete').click(fn)，它不会覆盖之前的点击处理程序；相反，它添加了另一个处理程序。之后，当 img.delete 被点击时，所有注册的处理程序被连续调用，导致一个弹出窗口紧接着另一个。

应该先调用.unbind()来补救；这样做将有效地用新的点击处理程序替换以前的点击处理程序。

$('img.delete')
    .unbind('click')
    .click(function () {         
        if(confirm("This selected record will be deleted. Are you sure?")){
            //Do something...

            // remove the image here I guess?
        }
    });

但如果您也能找到根本原因，那就更好了。