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/