CODEWITHSUNDEEP
javascriptjquery
Steve Lam
Steve Lam

Reputation: 509

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

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>

Upvotes: 1

Views: 167

Answers (5)

Ja͢ck
Ja͢ck

Reputation: 173552

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.

Upvotes: 2

Blowsie
Blowsie

Reputation: 40535

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...
            }
        });

Upvotes: 0

Sachin Tanwar - .Net Developer
Sachin Tanwar - .Net Developer

Reputation: 347

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>

Upvotes: 0

zb&#39;
zb&#39;

Reputation: 8049

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);

Upvotes: 0

Swarne27
Swarne27

Reputation: 5747

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

});

Upvotes: 0

Related Questions