Jquery: .on('input') not firing when input value changed by another function

Question

Here's the code:

$("input[type='text']").on('input', function() { ...stuff here... });  //first function

$('input[type="text"]').click(function() {  //second function
  $('#keyboard').show();
  $('#keyboard .letter').click(function() {
    var currentValue = $('input[type="text"]').val();
    alert(currentValue);
    $('input[type="text"]').val( currentValue + $(this).text() );
  });
});

The short version is, when I type in this text input, the top function fires. In the second function, I make a keyboard appear, and change the value of the input based on user clicks. However, the first function is not firing when the input value is changed by means of the second function. Any ideas? Much appreciated.

Answer 1

$("input[type='text']").trigger('input');

Put that in your second function. Merely setting the value of a textbox using javascript will not trigger the input event, thus your input event handler will not fire. In this scenario, you need to trigger that event handler manually.

Note: You should not be using the input event handler. See this link and look at the the awful browser compatibility. https://developer.mozilla.org/en-US/docs/DOM/window.oninput . You will probably be better served by the change event instead.