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.

divy3993 · Accepted Answer · 2016-07-21 11:22:38Z

14

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

edited Jul 21, 2016 at 11:22

divy3993

5,8202 gold badges30 silver badges44 bronze badges

answered Mar 13, 2013 at 15:15

Brad M

7,9101 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

iAmClownShoe Over a year ago

Agreed. this should invoke the change event not input.

gen_Eric Over a year ago

I didn't even know there was an oninput event!

preahkumpii Over a year ago

I am making packaged app for Chrome, so I only care about webkit. .on('input') works there. Although I did change that to .change() and it would not work. No idea why. Thanks for the answer.

Mr.code892 Over a year ago

Changing the value of an input element using JavaScript, using .val() for example, won't fire the .change() event. Documentation: api.jquery.com/change

cmartin Over a year ago

It does fire the event in IE 10 and 11. But not edge. (not sure on older versions).

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related