JQuery On change, keyup not firing

Question

I have an issue with a really simple function that is trying to fire when a text box changes. This seems to be a commonly asked question, but most of the time seems to revolve around the top $(document).ready being missing.

however this is stumping me. I have a number of other JQuery elements firing correctly, but this one doesn't seem to want to. Any ideas guys?

detection: <input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">

$(document).ready(function() {
  $('#txt_detection').on('change, keyup', function(){
    alert "oops!";
  });
});

I have it in a fiddle too: https://jsfiddle.net/hzmjjzd9/

Any help gratefully received.

Answer 1

You have two issues in your code. Firstly on() accepts each event in a single string that's space delimited, not comma delimited. Secondly, you're missing the brackets when you call alert(). Try this:

$(document).ready(function() {
  $('#txt_detection').on('change keyup', function() {
    alert("oops!");
  });
});

Alternatively you can use the input event as it convers additional methods of amending the content of an input element, such as pasting using the mouse.

jQuery($ => {
  $('#txt_detection').on('input', function() {
    console.log("oops!");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
detection:
<input type="text" placeholder="detect value" name="txt_detection" id="txt_detection">