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.

Answers


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.


Need Your Help

normalizing multivariate data

r time-series cluster-analysis normalization

Please is there any R package or function that I can use to normalize multivariate data? I'm not really concerned about the normalization method (min-max, z-score, anything works for me!!). I have a

intercepting a Key combination with a word instead of a single key / modifier

vb.net winforms visual-studio-2012

I am working on a piece of software where we need a calibration form that we want available for the install team to use to calibrate a camera.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.