Javascript не распознает self.функцию, когда внутри onclick событие

Question

У меня есть файл Javascript, который я добавил. Это для плагина twitter, и я добавляю функцию фильтра.

Это мой сценарий (соответствующие части):

;(function ($, window, document, undefined) { 

    var pluginName = "twitterFeed", 
     defaults = { 
      username: null, 
      webservice_url: "/services/Scope/Country_United_States_Internet/TwitterService.svc/DoTwitterSearch", 
      num_tweets: 3 
     };  

    // The actual plugin constructor 
    function Plugin(element, options) { 
     this.element = element; 

     this.options = $.extend({}, defaults, options); 

     this._defaults = defaults; 
     this._name = pluginName; 

     this.init(); 
    } 

    Plugin.prototype = { 

     init: function() { 
     //if username is unknown 
      if(this.options.username == null) { 
       // do nothing 
       try{console.log('twitter username not found')}catch(err){}; 
       return false; 
      } 
      // Get the tweets to display 
      this.getTweets(); 

      $(".twitter-search input").on("change", function() { 
       var filters = this.formatFilters($(this).val()); 
       this.getTweets(filters); 
      }); 
     }, 

     formatFilters : function(filterString) { 
      var hashtags = filterString.split(" "); 
      var hashtagString = ""; 
      for (var i = 0; i < hashtags.length; i++) { 
       var hashtag = hashtags[i]; 
       hashtag = hashtag.replace(",", ""); 
       if (hashtag[0] !== "#") { 
        hashtag = "#" + hashtag; 
       } 
       hashtagString += " " + hashtag; 
      } 
      return hashtagString; 
     }, 

     getTweets : function(filters){ 
      var self = this; 
      var query = "from:" + self.options.username; 
      if (filters) { 
       query += filters; 
      } 
      var post_data = JSON.stringify(
       { 
        "PageSize" : self.options.num_tweets, 
        "TwitterQuery" : query 
       } 
      ); 
      $.ajax({ 
       type: "POST", // Change to POST for development environment 
       url: this.options.webservice_url, 
       data: post_data, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       timeout:2000, 
       success: function(data) { 
        // render the tweets 
        self.renderTweets(data.ContentItems); 
       }, 
       error: function(error, type){ 
        try{console.log(type);}catch(err){} 
       } 
      }); 
     }, 

Я добавил $(".twitter-search input") на события изменения (в init), и я добавил функцию formatFilters(). Однако в функции onchange я получаю сообщение об ошибке «this.formatFilters() не определен». Я попытался удален this, но все еще есть «formatFilters() не определен.

Answer 1

Помните, что this внутри обработчика событий означает, что любой элемент HTML событие было активировано на.

Вместо этого, вы должны следить из фактический Plugin объект, а не HTML элемент.

var self = this; 
$(".twitter-search input").on("change", function() { 
    var filters = self.formatFilters($(this).val()); 
    self.getTweets(filters); 
}); 

Answer 2

проблема вы испытываете с областью видимости функции. Когда вы смотрите на это в обработчике событий он указывает на объем обратного вызова, а не сферу ваших formatFilters функция.

Чтобы это исправить - В функции init добавить var self = this; на первой линии, а затем изменить вызов использовать self.formatFilters вместо this.formatFilters