为什么这个jQuery ajax click事件多次触发?
我尝试解除了点击事件的绑定,但它有时会发射两次,有时是5次! 现在有点厌倦了!
来自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 : , a : addassociateID}, async:true, success: function(data) { $(".associate_users").load("/data/sub_watch_members.asp?watchListID=", {cache:false},function() { $(".search_note").html(data) $(this).unbind('click').bind('click',handler); }) }, error: function(data){ $(".search_note").html(data) } }); })
更新 :
基本上我将以下代码调用到.associate_users
5)Neil Burton
更多信息 :
这只发生在我触发事件时,关闭modal dialog然后用不同的watchListID
重新打开它
数据结构:
- main.asp : LOADS >
- modal.asp :modal.asp包含来自上面的jquery +此页面上的两个div,其中包含panel1.asp和panel2.asp数据…
- panel1.asp :包含上面的HTML …
- panel2.asp :不包含任何相关内容……只是纯HTML。
观察你的分号,确保用一个结束每个命令,以后会让你头疼。
至于live()
绑定的事件,它们必须通过调用die()
来解除绑定。 它与unbind()
具有相同的参数。 看看文档 。
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);
编辑:忘记添加一些重要的观点。 您必须在点击处理程序中取消绑定您的直播事件并在出错时重新绑定它,就像@stefan建议的那样。
还要确保this
对象保存在变量中,因为它不指向ajax回调函数中的DOM元素。 或者,您可以在ajax请求中使用context
属性,请查看文档 。
正如我所看到的,你想要做的就是将事件绑定一次然后死掉它。 最新的jQuery版本有一个.one()方法,它只会绑定一次事件。
例:
$('#myDiv').one('click', function() { alert('clicked once...'); });
下次单击时,单击事件将不会启动。
更多信息,请访问http://api.jquery.com/one/
我现在已经解决了这个问题,我正在使用
$(document).ready
在加载的ajax内容中……
所以我认为它正在加倍“实时”function!
非常感谢您的回复。
这可能会有所帮助 – http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/
您可以通过两种方式解决问题:
1)将您的javascript代码移动到main.asp,而不是modal.asp。
这将立即修复您的双火问题。 您必须稍微修改代码以从modal.asp中的某些HTML中提取WatchListID值,而不是直接对其进行编码(因为main.asp还没有该值。)
2)将您的javascript代码保持原样,但停止使用直播活动。
使用简单的“.click(function(){”调用,而不是“.live”(’click’,function(){“)。
每次打开对话框时都会重新加载modal.asp,这意味着每次加载时都会运行javascript。 如果你将你的javascript代码保存在modal.asp中,那么live()可能不合适。
事后你首先取消了成功。 您需要在单击处理程序中解除绑定,然后再次将其添加到错误上。
我这样解决了:
var liveActionRemove = $('#ajax-list-action-remove'); $(liveActionRemove).live('click', function(){ $(liveActionRemove).die('click'); $.ajax({ url: '/someurl', success: function(data){ } }); });
点击一下,当我点击任何一个html元素的最终点击事件,如果被解雇,我通过使用ubind点击事件解决它—-使用以下代码…
$( “selcetor”)解除绑定( ‘点击’);