为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery 对象方法被多次调用

jQuery 对象方法被多次调用

慕姐8265434 2022-12-29 15:10:39
我正在尝试编写一个 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();时,该函数被再次调用。我希望“外部”部分只在初始化时运行一次,而不是每次表单输入更改时运行。我不明白这里发生了什么。如果有人能向我解释为什么会这样,我将不胜感激!
查看完整描述

1 回答

?
拉莫斯之舞

TA贡献1820条经验 获得超10个赞

问题是您正在重新定义 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>


查看完整回答
反对 回复 2022-12-29
  • 1 回答
  • 0 关注
  • 104 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信