0

以下のコードは、DOM に動的に追加しようとするまで機能します。部屋を追加できるようにし、それらの部屋にアイテムを追加できるようにする必要があります。オンライン バージョンを試してみると、ハードコードされた html は計画どおりに動作しますが、追加で動的に追加されたものは動作しないことがわかります。私は .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/

4

2 に答える 2

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:)の代わりに最も近い親要素を取ることができます

于 2013-09-16T08:52:15.460 に答える
0

これを試して

デモ

 $(document).on('click','.addItem', function () {
    $('<input type="text"/>').appendTo($(this).siblings('.items'));
});
于 2013-09-16T08:52:06.903 に答える