How to handle events on dynamically added elements in jQuery

Question

A fairly straightforward question - Why doesn't mouseover trigger for (text) inputs which are dynamically generated after the page has loaded?

I can get it to work for checkbox, select, textarea...

Below code doesn't give an event

 $(document).ready(function () { $(`input[type=text]`).on(`mouseover`, function (e) { console.log(e); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text">

Below code gives an event for everything but text input:

 $(document).ready(function () { $(`input, textarea, [type=checkbox], select`).on(`mouseover`, function (e) { console.log(e); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input> <textarea></textarea> <input type="checkbox"> <select> <option>test</option> </select>

How can I trigger mouseover event for a text input?

EDIT: The text inputs are dynamically generated after the document has loaded.

Thank you

Answer 1

You need to pass a second parameter to .on that allows for event delegation :

 $(document).ready(function () { // Set the handler up on something you know will be there from the start // that the event(s) that get triggered later can "bubble" up to. That's // document in this case. // The second argument becomes what you want the event to be handled on $(document).on(`mouseover`, "input[type='text']", function (e) { console.log(e); }); // Create a new element after the handler has been set up $(document.body).append('<input type="text">'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>