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

Question

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.

I also loaded the two versions of jQuery on my **index.php** ` ` but work not the function **on** only work the function **live** **edit: #modal to input** `$('input').live('keyup', 'input', function() { handler = $(this).val(); name = $(this).attr('name'); alert(handler+" "+name); });` when I using code so it work fine, thanks again for the help :) — redbull330, Oct 11 '12 at 01:01
Just a note. You dont load two versions of JQuery. You load a version 1.6.2 of JQuery and 1.8.18 of JQuery UI. JQuery UI is used for user interface components and is not the same thing of JQuery. For best pratice try to use JQuery from online resource like Google instead of local file. — Carlos Pereira, Oct 11 '12 at 13:01
@Carlos Eduardo Bruno Pereira Thanks for the good clearing, I always believed that both have the same package already exist only the -ui with extra features added but it wasn't so :) — redbull330, Oct 11 '12 at 13:32
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Qantas 94 Heavy, May 07 '14 at 10:40

score 42 · Accepted Answer · edited Jul 08 '13 at 09:01

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');
});

Your answer, the article you linked to, and @ernie mentioning the `` all really helped me understand how `.on()` works. Thank you! — Mark Rummel, Nov 19 '13 at 19:11

score 6 · Answer 2 · answered Oct 10 '12 at 23:26

6

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.

answered Oct 10 '12 at 23:26

Gromer

9,305
4
32
54

I am sorry, before was working inputs which loaded before appendTo() in the **modal** div but now both arent't work and I didn't understand what the different is **on** using and I think inputs element founds in **modal** div not in **body** but each div must founds in **body** I don't know but it isn't work – redbull330 Oct 11 '12 at 00:23
You can change `'body'` to any selector you feel like. That selector should work, though. Your modal HTML will still be inside the body, as it can't be outside it. – Gromer Oct 11 '12 at 00:48

score 3 · Answer 3 · answered Oct 10 '12 at 23:29

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.

Your last sentence really helped me understand this concept. Thank you! — Mark Rummel, Nov 19 '13 at 19:12

score 1 · Answer 4 · edited Aug 22 '14 at 17:30

1

Function binds are made in page load. To work on elements created dynamically using the function live (). Example:

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

edited Aug 22 '14 at 17:30

Derek 朕會功夫

84,678
41
166
228

answered Oct 10 '12 at 23:30

Carlos Pereira

222
1
8

4

Just as a note, [.live()](http://api.jquery.com/live/) is deprecated as of jQuery 1.7, so it's a good idea to switch to [.on()](http://api.jquery.com/on/) – ernie Oct 10 '12 at 23:31

score 0 · Answer 5 · answered Jun 08 '15 at 21:39

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.

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

5 Answers5

Linked

Related