javascript - jquery append 在第一个 html 块上工作正常，但不适用于动态添加的 html

Question

我有下面的代码，直到我尝试动态地向 DOM 添加更多内容。它应该允许添加房间，然后允许将项目添加到这些房间。如果您尝试在线版本，您会看到硬编码的 html 可以按计划工作，但动态添加的带有 append 的则不能。我试过 .live() 但它对我不起作用，我可能用错了

$(document).ready(function () {
    $('.addItem').on('click', function () {
        $('<input type="text"/>').appendTo($(this).siblings('.items'));
    });

    $('#addRoom').on('click', function () {
        var number = 1;
        number++;
        $('<div class="formHolder">\
        <form class="items" rel="' + number + '">\
        <input type="text"/>\
        </form>\
        <div class="addItem">Add Item</div>\
        </div>').appendTo('#content');
    });
});

http://jsfiddle.net/andyjh07/pxdFj/

Answer 1

使用 jQuery eventDelegation：

演示

    $(document.body).on('click','.addItem', function () {
        $('<input type="text"/>').appendTo($(this).siblings('.items'));
    });

    $(document.body).on('click','#addRoom', function () { 
        var number = 1;
        number++;
        $('<div id="formHolder">\
        <form class="items" rel="' + number + '">\
        <input type="text"/>\
        </form>\
        <div class="addItem">Add Item</div>\
        </div>').appendTo('#content');
    });

您可以使用最近的父元素代替document.body:)

Answer 2

尝试这个

演示

 $(document).on('click','.addItem', function () {
    $('<input type="text"/>').appendTo($(this).siblings('.items'));
});