通过 Ajax 加载的内容中的 DOM 更改答案

【问题标题】：DOM changes inside content loaded via Ajax通过 Ajax 加载的内容中的 DOM 更改
【发布时间】：2013-01-31 23:41:34
【问题描述】：

我正在通过 jQuery Ajax 加载一堆内容，现在我想在这个加载的内容中更改一个 img src 属性。

使用.click 显然是行不通的，针对我使用.on 的Ajax 加载内容：

$("#user_list").on('click','.block_user', function(e) {
    e.preventDefault();
    $(this).attr("src", "path_to_img_and_name.png");
});

这很好用。图像被替换，当我把这个更改放在 NEW jquery ajax 调用中时，我的问题出现了：

$("#user_list").on('click','.block_user', function(e) {
    e.preventDefault();

    var bstatus=$(this).attr("bstatus"),
    user_id=$(this).attr("user_id");

    $.ajax({
        url: 'main/change_user_status',
        data: {
            bstatus: bstatus,
            user_id: user_id
        },
        type:'POST',
        dataType: 'json',
        success: function(output){
            $(this).attr("src", "images/"+output+"_block_user.png");
            $(this).attr("bstatus", output);
        }
    });
});

这根本不起作用。

AJAX 调用转成功。
范围是正确的，我的 img 的路径也是正确的。
只有当我的点击函数有 AJAX 调用时才会发生这种情况

好像原来的内容被重新加载了，有人知道吗？

【问题讨论】：

标签： jquery

【解决方案1】：

您的问题是 $(this) 选择器的范围。你可以使用这样的东西

$("#user_list").on('click','.block_user', function(e) {
e.preventDefault();

var bstatus=$(this).attr("bstatus"),
user_id=$(this).attr("user_id");

var elem = $(this)

$.ajax({
    url: 'main/change_user_status',
    data: {
        bstatus: bstatus,
        user_id: user_id
    },
    type:'POST',
    dataType: 'json',
    success: function(output){
        elem.attr("src", "images/"+output+"_block_user.png");
        elem.attr("bstatus", output);
    }
});
});

【讨论】：

请看我对 techfoobar 的回答，这不是范围问题。
你确定进入的是成功函数吗？
是的，警报和控制台日志显示了它。事实上，如果我记录 elem.attr("src", "images/"+output+"_block_user.png");它显示了正确的代码，除了图像没有改变......
bstatus attr 有变化吗？
成功就改变，成功结束就回到原来的值...

【解决方案2】：

使用$.ajax() 的context 属性确定success 回调中this 的值：

$.ajax({
    url: 'main/change_user_status',
    context: this, // here 'this' refers to the #user_list that was clicked
    ...
    success: function(output) {
        // here 'this' refers to what we set as 'context'
        $(this).attr("src", "images/"+output+"_block_user.png");
        $(this).attr("bstatus", output);
    }
});

http://api.jquery.com/jQuery.ajax/ - 向下滚动一点以了解context

【讨论】：

你好。我在那里粘贴了错误的代码。我确实尝试了上下文，还尝试将原始范围放在另一个变量中，但没有运气。还是不行。