如何处理通过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.

Answer 1

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()

Answer 2

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