0

私は、JQuery で関数を拡張する方法について簡単にグーグルで検索しましたが、自分が何をしているのかわかりません。一般的に理解したいのですが、この特定のインスタンスでは、.val() 関数を拡張して、トリガーの「変更」イベントをすべてに追加したいと考えています。つまり、これは次のようになります。

$('#element').val('newval');

自動的に次のようになります。

$('#element').val('newval').trigger('change');

これが私の試みです...それは私のページを壊していますが、うまくいけば私は近いです:

        (function($, input){

            var oldValFn = $.fn.val;

            $.fn.val = function() {
                var ret = oldValFn.apply(this, arguments);
                try {
                                            $(this).val(input);
                    $(this).trigger('change');
                }
                catch(e) 
                {
                    console.log(e);
                }
                return ret;
            }

            $(this).val('newval');

            })(jQuery);

これは明らかに私が概念的に理解する必要があるものであるため、どんな助けも大歓迎です。ありがとう！

4

1 に答える 1

1

おそらくそれは最善の解決策ではなく、いくつかの欠点があります ($.fn.valすでにthis.val内部的にも呼び出されているため、多くのオーバーヘッドがあります) が、この実装は正常に機能しているようで、値が変更されていない場合は変更イベントをトリガーしないことで無限ループを回避します。

完全にテストされていないことに注意してください。ただし、このプラグインに真剣に取り組んでいる場合は、いくつかのテスト ケースを作成できます。

!function ($, oldValFn) {
    $.fn.val = function () {
        var args = arguments;

        if (!args.length) return oldValFn.call(this);

        this.each(function () {
            var $this = $(this),
                oldVal = oldValFn.call($this),
                result = oldValFn.apply($this, args),
                newVal = oldValFn.call($this);

            if (args.length && oldVal !== newVal) {
                $this.trigger('change');
            }
        });

        return this;
    };
}(jQuery, jQuery.fn.val);

デモ

于 2013-10-17T04:52:58.860 に答える