Javascript erkennt nicht self.function wenn innerhalb onclick Ereignis

Question

Ich habe eine Javascript-Datei, die ich hinzugefügt habe. Es ist für ein Twitter-Plugin und ich füge eine Filterfunktion hinzu.

Das ist mein Skript (die relevanten Teile):

;(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){} 
       } 
      }); 
     }, 

ich die $(".twitter-search input") auf Änderungsereignis (in init) und ich hinzugefügt, um die formatFilters() Funktion hinzugefügt. In der onchange-Funktion erhalte ich jedoch den Fehler "this.formatFilters() ist nicht definiert". Ich habe versucht this entfernt, aber immer noch „formatFilters() nicht definiert ist.

Answer 1

Denken Sie daran, dass this innerhalb eines Event-Handlers bedeutet, was auch immer HTML-Element das Ereignis aktiviert auf.

Stattdessen müssen Sie den Überblick über die halten ist Plugin Objekt, nicht das HTML-Element.

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

Answer 2

das Problem, das Sie erleben, ist mit Funktionsumfang. Wenn Sie diese im Ereignishandler verweisen verweist er auf den Rückruf Umfang und nicht den Umfang Ihrer formatFilters Funktion.

Um es zu beheben - In der init Funktion hinzufügen var self = this; auf der ersten Zeile und dann den Anruf ändern self.formatFilters statt this.formatFilters

zu verwenden