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

$("input[name=add_associate]").live("click",function(){
    var addassociateID = $(this).attr("id")

    $.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).unbind('click').bind('click',handler);                                                                                                
           })
       },
       error: function(data){
           $(".search_note").html(data)
       }
    });     
})

UPDATE:
Basically I am calling the following code into .associate_users

<div id="associate_list">
    <div class="associate_record">
        <div class="left" style="padding:8px;"><img src="../imgs/nopic-m.png" style="width:30px;height:30px;" class="img_border" /></div>
        <div class="left" style="padding-top:15px;">5)Neil Burton</div>
        <div class="right" style="padding-top:10px;margin-right:5px;"><input type="button" class="btn-blue" name="add_associate" id="890" value="Add"></div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>

FURTHER INFORMATION:
This only happens when I fire the event, close the modal dialog then re-open it with a different watchListID

THE STRUCTURE OF DATA:

• main.asp: LOADS >
• modal.asp: modal.asp contains the jquery from above + two divs on this page with panel1.asp and panel2.asp data...
• panel1.asp: Contains the HTML above...
• panel2.asp: Contains nothing related... just pure HTML.

Answer 1

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.

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/