2013-10-17 158 views
0

我刚刚做了一个关于如何在JQuery中扩展函数的快速谷歌,以及我不知道我在做什么。我一般都想了解,但在这个特定的例子中,我想扩展.val()函数来为所有事物添加一个触发器'change'事件,因为默认情况下隐藏输入等特定元素不会这样做。因此,换句话说,这样的:JQuery:扩展.val()包含.trigger()

$('#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); 

任何帮助都非常感谢,因为这显然是我需要从概念上理解的东西。谢谢!

+0

有没有需要设置'$(本).VAL(输入)'....除此之外,则是罚款http://jsfiddle.net/arunpjohny/RA88u/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); 

DEMO

+0

你真的需要引入一个循环。当你执行'oldValFn.call(this)'时,即使不止一个,你也只能得到第一个元素的值。 – user2736012

+0

@ user2736012是的,我忘记了这种情况。固定。 – plalx