TypeError：不是函数

Question

I'm building a simple script. I'm trying to not use anonymous functions in jQuery, in order to maintain clean the code. This is the code:

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

And this is the 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>

When I try to use the form this is the error message returned in console:

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

Answer 1

Your problem here is you're using this.ajax_get_cat within your loop where this actually references each element returned in the selector.

You're also making the same mistake when setting this.selection, simply change this to Call and you should be good to go.

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

You can also store a proper reference to this before your loop like so:

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