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, запомните его, используя классический var that = this, прежде чем вы начнете each.