Question

我有两种类型的事件绑定链接。如果被点击的链接具有类'flagged'，则事件处理程序调用recallFlag，否则调用doFlag函数。

$(document).ready(function()  {

$('div.flag-link, span.flag-link').bind('click', function(e){
    if ($(e.target).attr('class')=='flagged') doRecall(e);
    else doFlag(e);
    return false;
});

doFlag函数加载表单，当用户提交表单时，接收json数据。使用该数据，它会更改链接的href和类（已标记 - ＆gt;未标记，反之亦然）。

当用户第一次标记项目时，执行正常。但是，当用户第二次点击另一个链接以标记另一个项目时，我有一个奇怪的行为：event.target被更改为post事件的回调函数内的第一个元素（第一次被点击）。结果，更新了错误的链接（之前单击的链接）。

我做错了什么？

function doFlag(e) {

    var link = e.target;
    var $prnt = $(link).parent();
    var $url = $(link).attr('href');
    console.log('new attempt to flag:' + $(link).attr('href'));

    Boxy.load($url, {modal:true, title:e.target.innerHTML, closeText:'[Kapat]', unloadOnHide:true, cache:false, behaviours: function(r) {

    $("#flag-form-submit").live("click", function(){
        var post_url = $("#flag-form").attr('action');  
        $.post(post_url, $("#flag-form").serialize(), function(data){

                //THIS IS WHERE THE CODE SCREWS UP:
                //here "link" is changed to the former link that triggered the event previously    
                if (data.status == 'ok') {

                    $(link).attr('href', data.url);
                    $(link).attr('class', data.css_class);
                    $(link).attr('innerHTML', data.text);
                    $prnt.children('img.flag-img').css('visibility', 'visible');

                }


            }, "json");
        boxy = Boxy.get(this);
        boxy.hideAndUnload();                       
        return false;
    });
    }
});

Answer 1

这是因为您正在使用.live事件。基本上你应该只对每个页面会话绑定一次，但是你每次都要向堆栈添加一个实时事件，但是你在单击第一个链接后只看到第一个添加了事件。

对于最少量的代码更改而不是.live，您可以使用点击但确保首先取消绑定

例如

$("#flag-form-submit").unbind('click').click( function(){
    var post_url = $("#flag-form").attr('action');
    .....

});

如果你想重构它的大部分，那么我会将实时处理程序移到该函数之外，在doc ready中绑定它，然后使用.data在#flag-form-submit元素上存储当前链接。

$("#flag-form-submit").data('currentLink', link);

然后在现场活动中

if (data.status == 'ok') {

       var $link = $("#flag-form-submit").data('currentLink');
       $link.attr('href', data.url);
       $link.attr('class', data.css_class);
       $link.attr('innerHTML', data.text);
       $prnt.children('img.flag-img').css('visibility', 'visible');

}

jquery event.target被更改为在ajax post回调中显示一个不相关的元素？

1 个答案: