javascript - 监听单个输入的变化

Question

我有一个包含两个字段的表单，它们的值正在以编程方式填充。当我通过 JS 更改值时，我使用 .trigger('change') ，然后监听此更改:

$('body').on('change', $(myInput1), function() {}); 和

$('body').on('change', $(myInput2), function() {});

问题是，如果我更改 myInput1 ，两个监听器都会处于事件状态(就像我更改了两个输入一样)。

这是一个重现问题的小演示:

$(document).ready(function() {
  $('a').click(function() {
    var randomValue = Math.random(0, 1) * 100;
    var holder = $(this).closest('.holder');
    holder.find('input').attr('value', randomValue);
    holder.find('input').trigger('change');
  });

  $('body').on('change', $('input[name="field_one"]'), function() {
    alert('field one has changed');
  });
  $('body').on('change', $('input[name="field_two"]'), function() {
    alert('field two has changed');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <div class="holder">
    <a href="#" class="field1">Change me</a>
    <input type="hidden" name="field_one" />
  </div>
  <div class="holder">
    <a href="#">Change me</a>
    <input type="hidden" name="field_two" />
  </div>

</form>

and jsfiddle demo

Answer 1

当使用事件委托(delegate)时，第二个参数为on应该是一个字符串，它是选择器。在您的情况下，您将传递一个 jQuery 对象作为第二个参数，因此事件注册会将其视为数据对象，并且处理程序将注册到 body元素和 jQuery 对象将作为 event.data 传递在处理程序中

$(document).ready(function() {
  $('a').click(function() {
    var randomValue = Math.random(0, 1) * 100;
    var holder = $(this).closest('.holder');
    holder.find('input').val(randomValue).change();
    //holder.find('input').attr('value', randomValue);
    //holder.find('input').trigger('change');
  });

  $('body').on('change', 'input[name="field_one"]', function() {
    snippet.log('field one has changed');
  });
  $('body').on('change', 'input[name="field_two"]', function() {
    snippet.log('field two has changed');
  });


  $('body').on('change', $('input[name="field_one"]'), function(e) {
    snippet.log('handler 1:' + this.tagName + ':' + e.data.selector);
  });
  $('body').on('change', $('input[name="field_two"]'), function(e) {
    snippet.log('handler 2:' + this.tagName + ':' + e.data.selector);
  });
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>

  <div class="holder">
    <a href="#" class="field1">Change me</a>
    <input type="hidden" name="field_one" />
  </div>
  <div class="holder">
    <a href="#">Change me</a>
    <input type="hidden" name="field_two" />
  </div>

</form>