jQuery 对象方法被多次调用

Question

我正在尝试编写一个 jQuery 方法来监视给定表单元素内的输入变化：

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

当我使用$(self).serialize(); 时，再次调用该函数。我希望“外部”部分仅在初始化时运行一次，而不是每次表单输入更改时运行一次。

我不明白这里发生了什么。如果有人能向我解释为什么会发生这种情况，我将不胜感激！

Answer 1

问题在于您正在重新定义 jQuery 的 filter 方法，它在其 serialize 方法中内部使用该方法。如果您更改名称，它将起作用。 serialize的定义如下：

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

工作示例：

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