jQuery Object Method Gets Called Multiple Times

Question

I am trying to write a jQuery method which watches for changes of inputs inside a given form element:

(function($) {
    $.fn.filter = function(options) {
        console.log('Outside');

        var self = this;
        var settings = $.extend({}, options);        

        this.on('change', ':input', function(e) {
            console.log('Inside');

           $(self).serialize(); // Here is the problem

        });

        return this;
    }
})(jQuery);

$('#filter-form').filter();

When I use $(self).serialize(); , the function being called again. I expect that the 'Outside' part only runs once on initialization and not every time the input of the form changes.

I do not understand what is happening here. I'd appreciate if someone could explain to me why this is happening!

Answer 1

The issue is that you are redefining jQuery's filter method, which it internally uses in its serialize method. If you change the name, it will work. The definition of serialize is shown below:

jQuery.fn.extend( {
    serialize: function() {
        return jQuery.param( this.serializeArray() );
    },
    serializeArray: function() {
        return this.map( function() {

            // Can add propHook for "elements" to filter or add form elements
            var elements = jQuery.prop( this, "elements" );
            return elements ? jQuery.makeArray( elements ) : this;
        } )
        .filter( function() {
            var type = this.type;

            // Use .is( ":disabled" ) so that fieldset[disabled] works
            return this.name && !jQuery( this ).is( ":disabled" ) &&
                rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
                ( this.checked || !rcheckableType.test( type ) );
        } )
        .map( function( _i, elem ) {
            var val = jQuery( this ).val();

            if ( val == null ) {
                return null;
            }

            if ( Array.isArray( val ) ) {
                return jQuery.map( val, function( val ) {
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                } );
            }

            return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
        } ).get();
    }
} );

Working Example:

 (function($) { $.fn._filter = function(options) { console.log('Outside'); var self = this; var settings = $.extend({}, options); this.on('change', ':input', function(e) { console.log('Inside'); $(self).serialize(); }); return this; } })(jQuery); $('#filter-form')._filter();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="filter-form"> <input type="text"> </form>