Why is this jQuery ajax click event firing multiple times?

Question

I have tried unbinding the click event, but it fires sometimes twice sometimes 5 times!! Getting a bit fed up now!

Code from modal.asp

$         


        

Answer 1

You are unbinding first afterwards the success. You need to unbind it in the click handler and then add it again onerror.

Answer 2

As I see, all you want to do is bind the event once and then die it. The latest jQuery versions have a .one() method, which will bind the event only once.

example:

$('#myDiv').one('click', function() {
    alert('clicked once...');
});

The next time you click, click event will not fire up.

More at http://api.jquery.com/one/

Answer 3

I solved it like this:

    var liveActionRemove = $('#ajax-list-action-remove');

    $(liveActionRemove).live('click', function(){
        $(liveActionRemove).die('click');

        $.ajax({
            url: '/someurl',
            success: function(data){
            }
        });
    }); 

Answer 4

I have resolved this issue now, I was using

$(document).ready

in the loaded ajax content along with...

<script src="/js/jquery-ui.js"></script>

So I presume it was doubling up the "live" function!

Thank you so much for the responses.

Answer 5

You can fix your problem in two ways:

1) Move your javascript code into main.asp, instead of modal.asp.

This will instantly fix your double-fire issue. You would have to modify your code slightly to pull the WatchListID value from some HTML inside modal.asp, rather than coding it directly as you are (since main.asp won't have that value yet.)

2) Keep your javascript code where it is, but stop using live events.

Use a simple ".click(function () {" call, instead of ".live('click', function() {".

You are reloading modal.asp each time the dialog opens, which means your javascript is being run every time it loads. If you keep your javascript code in modal.asp, then live() is probably not appropriate.

Answer 6

Watch your semicolons, make sure you end each command with one, will save you a headache later.

As for events bound by live(), they have to be unbound by calling die(). It has the same parameters as unbind(). Have a look at the documentation.

function ajaxHandler(){
    var addassociateID = $(this).attr("id");
    var $this = $(this);
    $this.die('click');

    $.ajax({
        type: 'POST',
        url: '/data/watchlist_save.asp',
        data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
        async: true,
        success: function(data) {
            $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",{cache:false},function(){
                $(".search_note").html(data);
                $this.bind('click',handler);
            });
        },
        error: function(data){
            $(".search_note").html(data);
            $this.live('click', ajaxHandler);
        }
    });     
}

$("input[name=add_associate]").live("click", ajaxHandler);

Edit: Forgot to add some important points. You have to unbind your live event right in the click handler and rebind it on error, just like @stefan suggested.

Also make sure you save the this object in a variable, as it's not pointing to your DOM element within the ajax callback function. Alternatively you can use the context property on your ajax request, check the documentation.