создание плагина jquery: this.html не является функцией

Question

Я следую этой документации и использую ее для загрузки и применения данных к DOM.Однако я не могу применить его, поскольку получаю:

this.html не является функцией: this.html (ajax_load);

Код:

(function( $ ){
  $.fn.tasks = function() {

    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    $.ajax({
        url: "include/tasks_handler.php?action=gettasks&list=default",
        beforeSend: function() {
            this.html(ajax_load);
        },
        success: function(html){
            this.html(html);
        }
    });

  };
})( jQuery );


$("#taskList").tasks(); 

Я также пробовал $ (this), что останавливает его взлом, но он не вводит содержимое в селектор.

Идеи?

Answer 1

this в опциях ajax относится к объекту опций , а не к контексту плагина. Обходной путь:

var that = this;
$.ajax({
    url: "include/tasks_handler.php?action=gettasks&list=default",
    beforeSend: function() {
        that.html(ajax_load);
    },
    success: function(html){
        that.html(html);
    }
});

Этот быстрый пример демонстрирует, что происходит:

var obj = {
    foo: function() {
        alert("bar");
    },
    bar: function() {
        alert(this.foo);
    }
};

obj.bar(); // function() { alert("bar"); }

Этот пример лучше демонстрирует, что происходит:

var options = {
    success: function(html) {
        this.html(html);
    },
    html: function(html) {
        alert("This is not the .html() you are looking for, move along." + html);     
    } 
}

options.success("some html");

Скрипка: http://jsfiddle.net/GTScL/

Answer 2

Возможно, вы захотите исправить самовыполняющуюся функцию, а затем создать переменную для html, прежде чем пытаться передать ее в другую функцию

(function ($) {

      $.fn.tasks = function () {

            var ele = $(this);

            $.ajax({
                    url: "include/tasks_handler.php?action=gettasks&list=default",
                    beforeSend: function() {
                           ele.html(ajax_load);
                    },
                    success: function(html){
                           ele.html(html);
                    }
            });
      };

}( jQuery )); // Bracket goes after