TypeError：不是函數

我正在構建一個簡單的腳本。我試圖在jQuery中不使用匿名函數，以保持代碼清潔。這是代碼：TypeError：不是函數

jQuery(function($) { 
    'use strict'; 
    var Call = { 
     selection: '', 
     init: function() { 
      this.product_opt = $('#product_opt'); 
      this.listenChange(); 
      //this.test(); 
     }, 
     listenChange: function() { 
      this.product_opt.live('change', this.afterChange); 
     }, 
     afterChange: function() { 
      $("#product_opt :checked").each(function() { 
       this.selection = $(this).attr('value'); 
       console.log(this.selection); 
       this.ajax_get_cat(); 
      }); 
     }, 
     ajax_get_cat : function(){ 
      return $.ajax({ 
       url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php', 
       data: { 
        'action': 'show_slider_callback', 
        'selection': this.selection 
       }, 
       success: function(data) { 
        // This outputs the result of the ajax request 
        //console.log(data); 
        console.log('returned' + data); 
       }, 
       error: function(errorThrown) { 
        console.log(errorThrown); 
       } 
      }); 
     } 
    }; 

    Call.init(); 
});

這是HTML：

<div id="product_opt"> 
    <input id="1" class="selector" type="radio" name="group1" value="6" /> 
    <input id="1" class="selector" type="radio" name="group1" value="6" /> </div>

當我嘗試使用的形式，這是在控制檯返回的錯誤信息：

TypeError: this.ajax_get_cat is not a function this.ajax_get_cat();

來源

2015-11-24 Alex Righetto

'我試圖在jQuery中不使用匿名函數，以便清理代碼'一個奇怪的聲明，考慮到1）匿名函數沒有錯，而且它們當然不是'不潔'的，2）你的代碼中有很多。另請注意，您在問題結尾處錯過了錯誤。 –

問題是'this'，你需要維護範圍和上下文。 – Jai

謝謝。我如何維持「這個」的範圍？非常感謝您爲這兩個快速答案。 –

你的問題這裏是你在循環中使用this.ajax_get_cat，它實際上引用了選擇器中返回的每個元素。

您在設置this.selection時也犯了同樣的錯誤，只需將其更改爲Call即可。

jQuery(function($) { 
    'use strict'; 
    var Call = { 
     selection: '', 
     init: function() { 
      this.product_opt = $('#product_opt'); 
      this.listenChange(); 
      //this.test(); 
     }, 
     listenChange: function() { 
      this.product_opt.live('change', this.afterChange); 
     }, 
     afterChange: function() { 
      $("#product_opt :checked").each(function() { 
       Call.selection = $(this).attr('value'); 
       console.log(Call.selection); 
       Call.ajax_get_cat(); 
      }); 
     }, 
     ajax_get_cat : function(){ 
      return $.ajax({ 
       url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php', 
       data: { 
        'action': 'show_slider_callback', 
        'selection': this.selection 
       }, 
       success: function(data) { 
        // This outputs the result of the ajax request 
        //console.log(data); 
        console.log('returned' + data); 
       }, 
       error: function(errorThrown) { 
        console.log(errorThrown); 
       } 
      }); 
     } 
    }; 

    Call.init(); 
});

您還可以將循環之前存儲的適當參考這個像這樣：

jQuery(function($) { 
    'use strict'; 
    var Call = { 
     selection: '', 
     init: function() { 
      this.product_opt = $('#product_opt'); 
      this.listenChange(); 
      //this.test(); 
     }, 
     listenChange: function() { 
      this.product_opt.live('change', this.afterChange); 
     }, 
     afterChange: function() { 
      var _this = this; 
      $("#product_opt :checked").each(function() { 
       _this.selection = $(this).attr('value'); 
       console.log(_this.selection); 
       _this.ajax_get_cat(); 
      }); 
     }, 
     ajax_get_cat : function(){ 
      return $.ajax({ 
       url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php', 
       data: { 
        'action': 'show_slider_callback', 
        'selection': this.selection 
       }, 
       success: function(data) { 
        // This outputs the result of the ajax request 
        //console.log(data); 
        console.log('returned' + data); 
       }, 
       error: function(errorThrown) { 
        console.log(errorThrown); 
       } 
      }); 
     } 
    }; 

    Call.init(); 
});

來源

2015-11-24 07:56:18

剛剛嘗試過，它的工作原理。謝謝！ –

變化以下部分

afterChange: function() { 
      $("#product_opt :checked").each(function() { 
       this.selection = $(this).attr('value'); 
       console.log(this.selection); 
       this.ajax_get_cat(); // this refers to $("#product_opt :checked") 
      }); 
     },

到

afterChange: function() { 
      var self = this; 
      $("#product_opt :checked").each(function() { 
       this.selection = $(this).attr('value'); 
       console.log(this.selection); 
       self.ajax_get_cat(); //self now refer to Call 
      }); 
     },

來源

2015-11-24 07:56:53 Bikas

這是個好主意！ –

所有三個答案都是正確的，它似乎也解決了你的問題。請選擇一個作爲正確答案。 – Bikas

內$(...).each通話返回，this不能同時是迭代的當前元素（$(this)...）和Call對象（this.ajax_get_cat）。實際上，它是當前的對象;要訪問外部this，請在開始each之前記住它使用經典var that = this。

來源

2015-11-24 07:57:50 Amadan

非常感謝您的提示 –

TypeError：不是函數

回答

相關問題