Why is this jQuery ajax click event firing multiple times?

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.


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.


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/

Tags:

Ajax

Jquery