Question

我在我的项目中使用cropin jQuery插件，并在将来为其提取更新，因此我不想更改它的代码。

在插件内部，它会使用value函数更改<input>元素的val()，但不会立即触发change事件，这意味着我无法收听事件使用这样的代码：

on("change", function(){
 //do something; 
})

*详细信息可在此处找到：.val() doesn't trigger .change() in jquery

问题：有什么解决方法吗？如果插件：

，如何在不修改插件代码的情况下收听change事件

使用val()修改元素value
在change来电之后不会触发val()个事件？

Answer 1

我不知道它是否有效，因为我从未这样做过。但是，根据：redefining-a-jquery-function 你可以重新定义jQuery的val函数来触发更改事件。

通过这种方式，您不必触摸该插件，并且每次调用val()时都会触发事件。示例代码包含在提供的链接中。

编辑：类似问题的答案表明这是不好的做法，因为有时这样做会导致jQuery的不可预测的行为。

Answer 2

你可以装饰jquery val函数。

编辑：我无法抗拒提出建议的更改，因为它是一个很好的解决方案。

// jQuery plugin to decorate .val
(function( $ ){
  var __val = $.fn.val,
      // save the previous values to a hash table
      values = {};
  $.fn.val = function( newVal ){
    // create a unique key based on tag offset id & class
    var hashId = this.prop('nodeName').toLowerCase() + '[' + this.index() + ']' + '#' + this.attr('id') + '.' + this.attr('class').replace(' ', '.');
    console.log('hashId', hashId);
    if( newVal && ( !values[ hashId ] || ( values[ hashId ] !== newVal ) )) {
      values[ hashId ] = newVal; 
      var ret = __val.apply(this, arguments);
      this.trigger('change');
      return ret;
    }
    console.log('no change');
    return __val.apply(this, arguments);
  }
})( jQuery );

var $input = $('#input'),
    $changer = $('#changer');

$input.on('change', function(e){
  console.log('changed: ' + this.value );
});

$changer.click(function(){
  $input.val('something');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<input id='input' class="some-input" type='text'>
<button id="changer">change</button>

Answer 3

请参阅此http://jsfiddle.net/cqz2u8x8/1/小提琴，了解不同的更改事件。您可能想尝试on（'input'）事件。每当发生真正的价值变化时，这似乎都会触发。

$("#testinput").on('input', function(e) {
    $("#valuetyped-input").html(e.target.value)
});

如何从使用val（）的jQuery插件中侦听事件

3 个答案: