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

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

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


jquery ajax load this
person Miro    schedule 22.10.2011    source источник
comment
Внутри вызова jQuery AJAX this относится к объекту jQuery XHR.   -  person Rob W    schedule 22.10.2011

Ответы (5)


arrow_upward
3
arrow_downward

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

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

$.fn.loadWithoutCache = function (){
  $.ajax({
    url: arguments[0],
    cache: false,
    dataType: "html",
    context: this,
    success: function(data) {
      $(this).html(data);
    }
  });
}
person Guffa    schedule 22.10.2011
comment
Вы говорите, что вызов .ajax() не находится в закрытом состоянии loadWithoutCache()? О.о - person Tadeck; 22.10.2011
comment
@Guffa: Если да, то просмотрите эту скрипку. Или я вас неправильно понял? - person Tadeck; 22.10.2011
comment
@Tadeck: контекст не является частью закрытия, он определяется тем, как вызывается функция. - person Guffa; 22.10.2011
comment
@Guffa: Вы имели в виду область действия в своем ответе (... он не работает в области действия метода loadWithoutCache, поскольку он уже завершился), и он остается в той же области видимости, имеет те же переменные, доступные для выполнения в функции loadWithoutCache (за исключением this / context). См. определение закрытия. - person Tadeck; 23.10.2011
comment
@Tadeck: код может получить доступ к переменным из замыкания, но он не работает в области действия функции, в которой было создано замыкание. Причина, по которой закрытие называется закрытием, а не областью действия, заключается в том, что она не совпадает с областью видимости. - person Guffa; 23.10.2011

arrow_upward
7
arrow_downward

Проблема в том, что внутри успешного обратного вызова 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);
    }
 });
}
person Jon    schedule 22.10.2011
comment
Нет, вам не нужно делать это, есть другие способы. - person Guffa; 22.10.2011
comment
Я бы сказал, что это правильно, но вы не должны писать $el = $(this); - это должно быть var $el = $(this);. Что вы думаете? - person Tadeck; 22.10.2011
comment
@Tadeck: Верно, спасибо за улов. Я написал локальную переменную, но это ускользнуло. - person Jon; 22.10.2011
comment
@Jon: Нет проблем, голосование сейчас;) - person Tadeck; 22.10.2011
comment
@miro: Вы уверены, что ваш селектор jQuery правильный? [] - это то, что происходит, когда у вас есть селектор, который ничего не соответствует ... - person Jon; 22.10.2011
comment
проблема заключалась в том, что мне нужен был $ (document) .ready (function () {////}); Спасибо вам, ребята!!! - person Miro; 22.10.2011

arrow_upward
2
arrow_downward

Ваш объем 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');

person Keith.Abramo    schedule 22.10.2011

arrow_upward
2
arrow_downward

В обратном вызове AJAX this привязан к другому объекту. Если вы хотите повторно использовать цель вашего плагина, сохраните (зафиксируйте) ее в локальной переменной и используйте ее.

$.fn.loadWithoutCache = function (){
 var $target = $(this);
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data) {
        $target.html(data); // note change
    }
 });
}
person tvanfosson    schedule 22.10.2011
comment
+1 Это почти то же самое, что и ответ Джона, за исключением того, что ваш правильный (хотя разница может быть видна не всем, и кому-то могут быть безразличны глобальные переменные). - person Tadeck; 22.10.2011

arrow_upward
1
arrow_downward

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

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

person Moin Zaman    schedule 22.10.2011
comment
Я ничего не получаю ... независимо от того, где я это кладу, это приводит к [] - person Miro; 22.10.2011