Слушайте изменение на одном входе

Question

У меня есть форма с двумя полями, и их значения заполняются программно. Я использую .trigger('change') при изменении значения с помощью JS, а затем прослушивать это изменение с:

$('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

При использовании делегирования событий, то второй параметр 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>

Answer 2

Попробуйте FIDDLE

не пропустите второй параметр как объект Jquery

Попробуйте изменить селектор из

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

в

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

Надеется, что это работает для вас.