$(это) не работает в функции

Question

Следующий код загружает содержимое 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>

Пожалуйста, дайте мне знать, в чем проблема? Надеюсь это что-то глупое:)

Изменить: ПРАВИЛЬНЫЙ КОД

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

Спасибо Джон и всем!

Answer 1

Обратный звонок (success) функция запускается, когда приходит ответ, и не работает в области действия loadWithoutCache метод, как это уже закончилось.

Вы можете использовать context недвижимость в ajax вызов, чтобы установить контекст функций обратного вызова:

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

Answer 2

Проблема в том, что внутри обратного вызова успеха, 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 3

В обратном вызове 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 4

Вы определяете 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 5

JQuery это контекстно. http://remysharp.com/2007/04/12/jquerys-this-demystified/

console.log($(this)) в разных точках, чтобы увидеть, к чему это относится.