How to have click or other handler attached to dynamically generated dom in jQuery?

Question

I have form with single text input to which I want to add functionality - on click generate new text input. Here's my code:

HTML

<form>
   Fill:
   <input type="text" name="0" class="target"/>
   <br /><br /><br /><input type="submit" value="post it!" />
</form>

JS/jQuery

<script>
   var i=1;
   $(function(){
     $("input.target:last").on("click", function(){
      $("input.target:last").after("<br /> <input type='text' " +  "name='" + i +"'"  + ' class="target" />');
      i++;
      });
   });
</script>

This works fine but only when clicking on first (non-dynamically) generated input. I've checked in Firebug, generated inputs are just fine - they are generated with correct class name and name attribute are incremented as expected - everything fine except click event is not related to any input but the first one, non- dynamically generated.

From the [documentation](http://api.jquery.com/on/) (in bold): *"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to `.on()`."* — Felix Kling, Jul 08 '13 at 08:32
@Dominic: `:last` is not a class, it's a pseudo selector. http://api.jquery.com/last-selector/ — Felix Kling, Jul 08 '13 at 08:36

score 1 · Accepted Answer · answered Jul 08 '13 at 08:33

1

Use delegated event handler:

 $(function(){
    $("form").on("click","input.target:last", function(){
      $(this).after("<br /> <input type='text' " +  "name='" + i +"'"  + ' class="target" />');
         i++;
      });
   });

When the second parameter is a selector, the event handler is delegated. Documentation

answered Jul 08 '13 at 08:33

Khanh TO

46,783
12
97
112

Yeah, you're right. Works. But I can't think of why in the world i must select parent node ("form") for this. Looks like I'm gonna have to spend more time in the docs. Thanks – Miloš Đakonović Jul 08 '13 at 08:42
@Miloshio: yes, you should read the docs to understand more, that's just a sample code. – Khanh TO Jul 08 '13 at 08:43
@Miloshio: http://learn.jquery.com/events/event-delegation/. – Felix Kling Jul 08 '13 at 09:00

How to have click or other handler attached to dynamically generated dom in jQuery?

1 Answers1