How to handle events on markup inserted through jQuery

Question

I have the following markup:

<div id="section">
    <input type="text" id="myInput">
</div>

On click of a button, I'm cloning and inserting a copy of this markup with unique IDs using this script:

var newSection = $("#section").clone();
$(newSection).attr('id', "section" + ($("div[id^=section").length + 1));
$(newSection).find("input").attr('id', "myInput" + ($("input[id^=myInput").length + 1));
$("div[id^=section").last().after(newSection);

My resulting markup:

<div id="section">
    <input type="text" id="myInput">
</div>
<div id="section2">
    <input type="text" id="myInput2">
</div>

My question: is it possible to manipulate this new markup with jQuery? I assume since it has loaded dynamically after a click it's not part of the initial DOM and jQuery doesn't recognize it? I'm having trouble getting a click event to register on #myInput2. Thanks for any insight.

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Mar 29 '17 at 15:17
`$(newSection).find("input").on('click', function() { alert('hi') })` seems a likely candidate ;) — Icepickle, Mar 29 '17 at 15:18
jquery can see existing DOM nodes just fine. If you register an event before the element has been added to the DOM via `.click` then it won't auto-register after - events only wire to elements that exist at the time. See here for more info: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Mar 29 '17 at 15:18
*I'm having trouble getting a click event to register on #myInput2* - how are you attempting "to register click event" ? — freedomn-m, Mar 29 '17 at 15:19
what are you doing with the inputs? if you're passing them to php for example you are better off naming them 'myinput[]' and get them as an array in php — Cr1xus, Mar 29 '17 at 15:22

Diego N. · Answer 1 · 2017-03-29T15:58:16.400

0

if you wrap them in a container, you can delegate that container keep track of the buttons. For example, if you have:

<div id="container">
    <div id="section">
        <input type="text" id="myInput">
    </div>
    <div id="section2">
        <input type="text" id="myInput2">
    </div>
</div>

you can delegate the task to the container like this:

$("#container").on("click","input",function(){
    var newSection = $("#section").clone();
    $(newSection).attr('id', "section" + ($("div[id^=section").length + 1));
    $(newSection).find("input").attr('id', "myInput" + 
    ($("input[id^=myInput").length + 1));
    $("div[id^=section").last().after(newSection);
}

This way you can manipulate them if not defined while binding

EDIT: Updated from .delegate() to .on()

edited Mar 29 '17 at 15:58

answered Mar 29 '17 at 15:37

Diego N.

562
3
10

1

Don't use `delegate` as it is marked as deprecated in v3, use `.on()` instead – empiric Mar 29 '17 at 15:43
Didn't notice, thanks for the advice @empiric! I'll update it using `.on( )` – Diego N. Mar 29 '17 at 15:56

score 0 · Answer 2 · answered Mar 29 '17 at 15:38

Add classes to your markup:

<div id="section" class="section">
    <input type="text" id="myInput" class="section-input">
</div>

Simplify your code

var $newSection = $('#section').clone();
var $sections = $('.section');
var index = $sections.length +1;
$newSection.attr('id', 'section' + index);
$newSection.find('input').attr('id', 'myInput' + index);

$sections.last().after($newSection);

Make sure click handlers are added to existing and new elements

$(document).on('click', '.section-input', function(){
    ... your code
})

How to handle events on markup inserted through jQuery

2 Answers2