TypeError：不是函数

Question

我正在构建一个简单的脚本。我试图在jQuery中不使用匿名函数，以保持代码清洁。这是代码：

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();

Answer 1

你的问题这里是你在循环中使用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(); 
}); 

Answer 2

变化以下部分

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

Answer 3

内$(...).each通话返回，this不能同时是迭代的当前元素（$(this)...）和Call对象（this.ajax_get_cat）。实际上，它是当前的对象;要访问外部this，请在开始each之前记住它使用经典var that = this。