JQuery Detect change input where the change was made by JS

Question

I want to detect a change in the input value where the change was made by JS.

HTML:

<input type="text" name="test_input"><br><br>
<button name="change_input">Change usign JS </button>

JS:

$(function() {
    $('body').on('change','input[name="test_input"]',function() {
        alert('Changed');
    });
    $('button[name="change_input"]').on('click',function() {
        $('input[name="test_input"]').val('New value');
    });
})

https://jsfiddle.net/7c54r7x9/

Thanks

Answer 1

The change event is only raised when the modification is made by user input. When it's set programmatically you'll need to raise the event yourself. In jQuery, you can do that by using trigger(), like this:

$(function() {
  $('body').on('change', 'input[name="test_input"]', function() {
    console.log('Changed');
  });

  $('button[name="change_input"]').on('click', function() {
    $('input[name="test_input"]').val('New value').trigger('change');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test_input"><br><br>
<button name="change_input">Change usign JS </button>