Question

我正在通过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调用

看起来原始内容正在以某种方式重新加载，任何人都有线索？

Answer 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);
    }
});
});

Answer 2

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

$.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

DOM通过Ajax加载内容

2 个答案: