Events triggered by a dynamically generated element are not captured by the event handler

Question

I have a <div> with id="modal" dynamically generated using the jQuery load() method:

 $('#modal').load('handlers/word.edit.php'); 

word.edit.php contains several input elements that are loaded into the modal <div> .

Using the jQuery keyup method, I can capture the input values ​​after the event fires, but when the elements are dynamically added to the modal div, the event when llonger does not start when the user enters their text.

Which jQuery method supports handling events caused by dynamically generated elements?

Code for creating new input elements:

 $('#add').click(function() { $('<input id="'+i+'" type="text" name="translations' + i + '" />') .appendTo('#modal'); 

Code to capture custom values:

 $('input').keyup(function() { handler = $(this).val(); name = $(this).attr('name'); 

This second block of code works for the original elements, but it is not triggered by new dynamically generated elements.

Answer 1

You need to delegate the event to the closest element of the static ancestor on the page (see also "Understanding event delegation" ). It just means that the element into which you are attaching an event handler must exist at the time the event handler is bound, so for dynamically generated elements you must let the event bubble up and process it further.

The jQuery .on method is a way to do this (or .delegate for older versions of jQuery.)

 // If version 1.7 or above $('#modal').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

Or in older versions

 // If version 1.6 or below // note the selector and event are in a different order than above $('#modal').delegate('input', 'keyup', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

Answer 2

This is because you add an input element after connecting to the event. Try .on :

 $('body').on('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); }); 

Using .on , make sure that the keyup event keyup connected to the inputs that are on the page initially, as well as to any that are added dynamically later.

Answer 3

When changing the DOM dynamically, jQuery will not attach event handlers to them. You need to use on () and delegated events

For your input elements, you need something like:

 $("<parentSelector>").on("keyup", "input", function() { handler = $(this).val(); name = $(this).attr('name'); }) 

If parentSelector is something higher in the DOM than the input element, and the element that exists when the page loads, maybe a form identifier or something like that.

Answer 4

Function binding is performed when the page loads. To work with elements created dynamically using the live () function. Example:

 $ ("p"). live ("click", function () { // Your function }); 

Answer 5

If you need to commit changes for all form elements, especially select the fields, I know that they are not mentioned here, but it is useful to know, use the following code:

 $(document).on('change', ':input', function () { alert('value of ' + $(this).attr('name') + ' changed') }); 

This should cover all input , textarea , select , checkbox , radio , etc.