Question

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

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

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

问题在于，如果我更改myInput1两个侦听器都处于活动状态（就像我已经更改了两个输入一样）。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

and jsfiddle demo

Answer 1

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

中

＆＃13;

event.data

＆＃13;

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

＆＃13;

Answer 2

尝试FIDDLE

不要将第二个参数作为Jquery对象传递

尝试从

更改选择器

$('body').on('change', $('input[name="field_one"]'), function(e) {

到

$('body').on('change','input[name=field_one]', function(e) {

希望它适合你。

听取单个输入的变化

2 个答案: