Events triggered by dynamically generated element are not captured by event handler
JavascriptJqueryJavascript Problem Overview
I have a <div>
with id="modal"
generated dynamically with the jQuery load()
method:
$('#modal').load('handlers/word.edit.php');
word.edit.php
contains a few input element, which are loaded into a modal <div>
.
Using jQuery's keyup
method I can capture the input values after an event fires, but
when the elements are added dynamically to the modal div, the event no llonger fires when the user enters their text.
Which jQuery method supports handling events triggered by dynamically created elements?
The code for creating the new input elements is:
$('#add').click(function() {
$('<input id="'+i+'" type="text" name="translations' + i + '" />')
.appendTo('#modal');
The code for capturing the user's values is:
$('input').keyup(function() {
handler = $(this).val();
name = $(this).attr('name');
This second code block seems to work for the original elements, but it is not fired by the new dynamically generated elements.
Javascript Solutions
Solution 1 - Javascript
You need to delegate the event to the closest static ancestor element within the page (see also "Understanding Event Delegation"). This simply means, the element where you bind your event handler must already exist at the time the handler is bound, so for dynamically generated elements you must allow the event to bubble up and handle it further up.
The jQuery .on
method is the 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');
});
Solution 2 - Javascript
This is happening because you're adding the input element after you wired up the event. Try .on:
$('body').on('keyup', 'input', function() {
handler = $(this).val();
name = $(this).attr('name');
});
Using .on
will make sure the keyup
event is wired up to inputs that are on the page originally, as well as any that are added later dynamically.
Solution 3 - Javascript
When you dynamically change the DOM, jQuery won't attach event handlers to them. You need to use on() and delegated events
For your input items, you'll need something like:
$("<parentSelector>").on("keyup", "input", function() {
handler = $(this).val();
name = $(this).attr('name');
})
Where the parentSelector is something higher in the DOM than the input element, and an element that exists at page load, maybe the form ID or something.
Solution 4 - Javascript
Function binds are made in page load. To work on elements created dynamically using the function live (). Example:
$ ("p"). live ("click", function () {
// Your function
});
Solution 5 - Javascript
If you need to capture changes for all of the form elements, particularly select boxes, I know they are not mentioned here, but it is helpful 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.