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

The following code loads html content from a file (i used this thread)

以下代码从文件加载html内容（我使用此线程）

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

Please let me know what the problem is? I hope it's something stupid :)

请让我知道问题是什么？我希望这是一个愚蠢的东西:)

Edit: CORRECT CODE

编辑：正确的代码

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

Thanks Jon and everyone!

谢谢乔恩和大家！

5 个解决方案

#1

The callback (success) function runs when the response arrives, and it doesn't run in the scope of the loadWithoutCache method, as that has already ended.

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

You can use the context property in the ajax call to set the context of the callback functions:

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

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

#2

The problem is that inside the success callback, this does not have the value you expect it to.

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

However, you do have access to this (with the expected value) inside loadWithoutCache itself. So you can achieve your goal by saving $(this) into a local variable and accessing it from inside the success handler (creating a closure).

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

This is what you need to do:

这是你需要做的：

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

#3

You scoping of this is incorrect. You need to save your this to a variable outside of the ajax success function and reference it from that variable

你确定这是不正确的。您需要将此保存到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');

#4

Within the AJAX callback, this is bound to a different object. If you want to reuse the target of your plugin, store (capture) it in a local variable and use that.

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

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

#5

JQuery's this is contextual. http://remysharp.com/2007/04/12/jquerys-this-demystified/

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

console.log($(this)) at different points to see what it refers to.

console.log（$（this））在不同的点上查看它所引用的内容。

#1