代码之家 › 专栏 › 技术社区 › shanyu

jquery event.target被更改为在Ajax后回调中显示一个不相关的元素?

jquery

shanyu · 技术社区 · 16 年前

我有两种类型的链接是事件绑定的。如果单击的链接具有“标记”类,则事件处理程序调用RecalFlag,否则调用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和类(标记为-->未标记,反之亦然)。

当用户第一次标记项目时,执行正常。但是,当用户第二次单击另一个链接来标记另一个项目时,我有一个奇怪的行为: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;
    });
    }
});

1 回复 | 直到 16 年前

redsquare 16 年前

这是因为您正在使用.live活动。基本上,每个页面会话应该只绑定一次,但是每次都要向堆栈中添加一个活动事件,但是在单击第一个链接之后,您只会看到第一个添加的活动。

对于代码更改量最小而不是.live,您可以使用单击,但请确保先将其取消绑定。

例如

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

});

如果您要重构其中的大部分,那么我会将活动处理程序移出该函数,将其绑定到doc ready中,然后使用flag form submit元素上的.data存储当前链接。

$("#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');

}