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

Question

我已经尝试解除了点击事件的绑定,但它有时会发射两次,有时是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 >
• modal.asp:modal.asp包含来自上面的jquery +此页面上的两个div,其中包含panel1.asp和panel2.asp数据...
• panel1.asp:包含上面的HTML ...
• panel2.asp:不包含任何相关内容......只是纯HTML.

Answer 1

观察分号,确保用一个分号结束每个命令,以后会让你头疼.

至于绑定的事件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元素.或者,您可以context在ajax请求中使用该属性,请查看文档.

Answer 2

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

例:

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

下次单击时,单击事件将不会启动.

更多信息,请访问http://api.jquery.com/one/

Answer 3

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

$(document).ready

在加载的ajax内容中......

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

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

非常感谢您的回复.

Answer 4

这可能会有所帮助 - http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/