Question

我的代码如下：

$('*[data-pickup]').change(function(){
    var value = $(this).val();
    console.log(value);
    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "a.php?pickup",
       data    : {'X': value},
      success: function(data) {
        $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO");
        }
      });

    $("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO 2");
    $("*[data-pick='" + $(this).attr("data-pickup") + "']").show();
})

当通过Firebug观看时，AJAX调用显示响应，屏幕上没有刷新，因此我将其更改为简单的＆＃34; Hello＆＃34;回复，但仍然没有效果。

如果我注释掉.html("HELLO 2")行，则会显示曾经隐藏的div，其中包含data-pick=1或data-pick=2等HTML5数据元素（取决于attr("data-pickup") is）自动填充＆＃34;测试＆＃34;，所以它显示＆＃34;测试＆＃34;。

如果我取消注释.html("HELLO 2")行，则div显示为＆＃34; HELLO 2＆＃34;。但是，对于注释掉.html("HELLO 2")行的情况，它应该从＆＃34;测试＆＃34;更新。到＆＃34;你好＆＃34;通过AJAX调用，但它不是。如果我将数据*更改为简单的HTML id元素并将所有代码更新为#" + $(this).attr("data-pickup") + "，则它与data属性完全相同（AJAX调用不会更新任何内容）。

当我制作名为＆＃34; el＆＃34;并使其等于*[data-pick='" + $(this).attr("data-pickup") + "']，然后将其打印到控制台，显示为：＆＃34; [data-pick =＆＃39; 1＆＃39;]＆＃34;或＆＃34; [data-pick =＆＃39; 2＆＃39;]＆＃34;等等。然后，如果我将所有代码从$("*[data-pick='" + $(this).attr("data-pickup") + "']").whatever更新为$(el).whatever（认为某处可能存在错误），它仍然可以像以前一样工作。

那么，我做错了什么？为什么不能通过AJAX调用刷新div，但它会在AJAX调用之后刷新？

Answer 1

问题是ajax函数的成功处理程序中的'this'是ajax函数本身而不是触发事件处理程序的元素。您需要做的是存储元素var el = $(this)的值，然后在您想要利用闭包访问元素时引用它。

$('*[data-pickup]').change(function(){
        var value = $(this).val();
        var el = $(this);
        console.log(value);
        $.ajax({
           type    : "POST",
           cache   : false,
           url     : "a.php?pickup",
           data    : {'X': value},
          success: function(data) {
            $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO");
            }
          });

        $("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO 2");
        $("*[data-pick='" + el.attr("data-pickup") + "']").show();
    })

Answer 2

试试这个：

$('*[data-pickup]').change(function() {
    var self = this;
    var value = $(self).val();
    console.log(value);
    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "a.php?pickup",
       data    : {'X': value},
      success: function(data) {
        $("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO");
        }
      });

    $("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO 2");
    $("*[data-pick='" + $(self).attr("data-pickup") + "']").show();
})

Answer 3

成功函数中的

this与更改处理程序中的其他位置this不同。

这是一个解决方案：

$('*[data-pickup]').change(function(){
    var value = $(this).val();
    var $el = $("*[data-pick='" + $(this).attr("data-pickup") + "']");//here keep a reference to the element(s) of interest.
    console.log(value);
    $.ajax({
        type: "POST",
        cache: false,
        url: "a.php?pickup",
        data: {'X': value},
        success: function(data) {
            $el.html("HELLO");//$el is still available here, from the closure formed by the outer function
        }
    });
    $el.show().html("HELLO 2");
});

jQuery刷新div基于HTML5数据元素

3 个答案: