Listen for change on a single input

Question

I have a form with two fields and their values are being populated programmatically. I'm using the .trigger('change') when I change the value via JS and then listen for this change with:

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

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

The problem is that if I change myInput1 both listeners are active (like I have changed both inputs).

Here's a small demo to reproduce the problem:

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

When you use event delegation, the second parameter to on should be a string which is the selector. In your case you are passing an jQuery object as the second parameter so the event registration will consider it as a data object and the handler will be registered to the body element and the jQuery object will be passed as event.data in the handler

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

Try the FIDDLE

Do not pass second parameter as a Jquery object

Try changing the selector from

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

to

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

Hope it works for you.