Prevent $('img').click triggered for several times

Question

I was wondering how to prevent the confirm message being prompted for several times, thanks in advance!

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

The problem in your code is that you apply the click handler multiple times; this is not visible from the code that you have posted, but it's definitely the cause.

If you run $('img.delete').click(fn) multiple times, it doesn't overwrite the previous click handler; rather, it adds another handler. Afterwards, when img.delete is clicked, ALL registered handlers get called in succession, resulting in one popup window followed by another.

It should be remedied by calling .unbind() first; doing so will effectively replace the previous click handler(s) by a new one.

$('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?
        }
    });

But it would be better if you could hunt the root cause down as well.

Answer 2

you can do this by unbinding in jquery

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

});

Answer 3

Use Jquery .one() method, that's pretty much what that was made for.

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

Answer 4

If you worry about this, you can be sure to not have event handler after click:

var confirm_me=function () {
    if(confirm("This selected record will be deleted. Are you sure?")){
        //Do something...
    }
    //restore event handler
    $(this).one('click',confirm_me);
    //prevent event propagation
    return false;
    }

//BE sure that you not do that in loop. if possible do - see second code
$('img.delete').one('click',confirm_me);

---

other case:

 var confirm_me=function () { var t=$(this); //check processing flag if (t.data('processing')) return false; //Set processing flag t.data('processing',1); if(confirm("This selected record will be deleted. Are you sure?")){ //Do something... } //restore event handler t.one('click',confirm_me); //remove processing flag t.data('processing',0); //prevent event propagation return false; } $('img.delete').one('click',confirm_me);

Answer 5

Use it , it is verified by me.

<script type="text/javascript">
var check = false;
$(document).ready(function () {
        $('img.delete').click(function () {
        if (check != true) {
            if (confirm("This selected record will be deleted. Are you sure?"))
                check = true;
        }
        else {
            alert('you have deleted one');
        }
        });
     });
</script>