为什么这个jQuery ajax click事件多次触发?

时间:2011-05-25 07:28:06

标签: jquery ajax

我已经尝试解除了点击事件的绑定,但它有时会发射两次,有时会发生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 : <%=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)
       }
    });     
})

更新
基本上我将以下代码调用到.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>

更多信息
这只发生在我触发事件时,关闭模态对话框然后用不同的watchListID

重新打开它

数据结构:

  • main.asp :LOADS&gt;
  • modal.asp :modal.asp包含此页面上方的两个div的jquery以及panel1.asp和panel2.asp数据......
  • panel1.asp :包含上面的HTML ...
  • panel2.asp :不包含任何相关内容......只是纯HTML。

8 个答案:

答案 0 :(得分:17)

注意分号,确保用一个分号结束每个命令,以后会让你头疼。

对于live()绑定的事件,必须通过调用die()来解除绑定。它具有与unbind()相同的参数。看看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);

修改:忘记添加一些重要的观点。您必须在点击处理程序中取消绑定您的直播活动并在出错时重新绑定它,就像建议 @stefan 一样。

还要确保将this对象保存在变量中,因为它没有指向ajax回调函数中的DOM元素。或者,您可以使用ajax请求中的context属性,查看documentation

答案 1 :(得分:11)

正如我所看到的,你要做的就是将事件绑定一次然后死掉它。最新的jQuery版本有一个.one()方法,它只会绑定一次事件。

示例:

$('#myDiv').one('click', function() {
    alert('clicked once...');
});

下次点击时,点击事件将不会启动。

更多http://api.jquery.com/one/

答案 2 :(得分:7)

我现在已经解决了这个问题,我正在使用

$(document).ready

加载的ajax内容以及......

<script src="/js/jquery-ui.js"></script>

所以我认为它正在加倍“实时”功能!

非常感谢您的回复。

答案 3 :(得分:7)

答案 4 :(得分:4)

您可以通过两种方式解决问题:

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()可能不合适。

答案 5 :(得分:2)

之后你首先取消了成功。您需要在单击处理程序中解除绑定,然后再次将其添加到错误中。

答案 6 :(得分:1)

我解决了这个问题:

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

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

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

答案 7 :(得分:0)

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

处理事件后,可以将处理的属性设置为 true。因此,在将控件传递给您的代码之前,请检查它是否仍然为 false。找到了这个 here,它对我有用。