Question

以下代码从文件中加载html内容（我使用this thread）

<script>
$.fn.loadWithoutCache = function (){
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
    success: function(data) {
        $(this).html(data);        // This is not working
      //$('#result').html(data);   //THIS WORKS!!!
        alert(data);           // This alerts the contents of page.html
    }
 });
}


$('#result').loadWithoutCache('page.html');

</script>

请告诉我这是什么问题？我希望这是愚蠢的事情:)）

编辑：正确代码

<script>
$(document).ready(function() {

$.fn.loadWithoutCache = function (){
 var $el = $(this);
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     context: this,
     success: function(data) {
     $el.html(data);
    }
 });
}

$('#result').loadWithoutCache('page.html');

});
</scipt>

感谢Jon和所有人！

Answer 1

问题是在成功回调中，this没有你期望的价值。

但是，您可以在this内部访问loadWithoutCache（具有预期值）。因此，您可以通过将$(this)保存到本地变量并从成功处理程序内部访问（创建闭包）来实现目标。

这是你需要做的：

$.fn.loadWithoutCache = function (){
 var $el = $(this);
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data) {
        $el.html(data);
        alert(data);
    }
 });
}

Answer 2

回调（success）函数在响应到达时运行，并且它不在loadWithoutCache方法的范围内运行，因为它已经结束。

您可以使用context调用中的ajax属性来设置回调函数的上下文：

$.fn.loadWithoutCache = function (){
  $.ajax({
    url: arguments[0],
    cache: false,
    dataType: "html",
    context: this,
    success: function(data) {
      $(this).html(data);
    }
  });
}

Answer 3

您this的范围不正确。您需要将this保存到ajax成功函数之外的变量，并从该变量引用它

<script>
$.fn.loadWithoutCache = function (){
 var self = this;
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
    success: function(data) {
        self.html(data);        // This is not working
      //$('#result').html(data);   //THIS WORKS!!!
        alert(data);           // This alerts the contents of page.html
    }
 });
}


$('#result').loadWithoutCache('page.html');

Answer 4

在AJAX回调中，this绑定到另一个对象。如果要重用插件的目标，请将其存储（捕获）到局部变量中并使用它。

$.fn.loadWithoutCache = function (){
 var $target = $(this);
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data) {
        $target.html(data); // note change
    }
 });
}

Answer 5

JQuery这是上下文。 http://remysharp.com/2007/04/12/jquerys-this-demystified/

console.log($(this))在不同的点上查看它的含义。

$（this）在函数中不起作用

5 个答案: