Why is this jQuery ajax click event firing multiple times?

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.

---

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/

---

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.

---

This might be helpful - http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

---

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.

---

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

---

I solved it like this:

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

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

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

---

function myEventHandler(e)
{
    if(e.handled !== true)
    {
      // put your payload here.
      // this next line must be here
      e.handled = true;
    }
    return false;
}

Once an event is handled, the property handled can be set to true. So, check this whether it is still false before passing the control to your code. Found this here and it worked for me.