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了）但是这个实现似乎工作正常，并且通过在值没有改变的情况下不触发 change 事件来避免无限循环。

请注意，它尚未经过全面测试，但如果您对这个插件很认真，您可以编写一些测试用例。

!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 回答