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( {&nbsp; &nbsp; serialize: function() {&nbsp; &nbsp; &nbsp; &nbsp; return jQuery.param( this.serializeArray() );&nbsp; &nbsp; },&nbsp; &nbsp; serializeArray: function() {&nbsp; &nbsp; &nbsp; &nbsp; return this.map( function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Can add propHook for "elements" to filter or add form elements&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var elements = jQuery.prop( this, "elements" );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return elements ? jQuery.makeArray( elements ) : this;&nbsp; &nbsp; &nbsp; &nbsp; } )&nbsp; &nbsp; &nbsp; &nbsp; .filter( function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var type = this.type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Use .is( ":disabled" ) so that fieldset[disabled] works&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.name && !jQuery( this ).is( ":disabled" ) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ( this.checked || !rcheckableType.test( type ) );&nbsp; &nbsp; &nbsp; &nbsp; } )&nbsp; &nbsp; &nbsp; &nbsp; .map( function( _i, elem ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var val = jQuery( this ).val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( val == null ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( Array.isArray( val ) ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return jQuery.map( val, function( val ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };&nbsp; &nbsp; &nbsp; &nbsp; } ).get();&nbsp; &nbsp; }} );工作示例：(function($) {&nbsp; $.fn._filter = function(options) {&nbsp; &nbsp; console.log('Outside');&nbsp; &nbsp; var self = this;&nbsp; &nbsp; var settings = $.extend({}, options);&nbsp; &nbsp; this.on('change', ':input', function(e) {&nbsp; &nbsp; &nbsp; console.log('Inside');&nbsp; &nbsp; &nbsp; $(self).serialize();&nbsp; &nbsp; });&nbsp; &nbsp; return this;&nbsp; }})(jQuery);$('#filter-form')._filter();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="filter-form">&nbsp; <input type="text"></form>