jquery append works fine on first block of html but doesnt work on dynamically added html

Question

I have the below code which works until i try dynamically adding more to the DOM. It should allow for rooms to be added, and then allow for items to be added to those rooms. If you try the online version you'll see the hardcoded html one works as planned, but dynamically added ones with append don't. I have tried .live() but it didnt work for me, i may have used it wrong however

$(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/

you should search before asking question already answered thousand times, and/or use your browser console and ask specific question... — A. Wolff, Sep 16 '13 at 08:51
possible duplicate of [jQuery .live() vs .on() method for adding a click event after loading dynamic html](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht) — A. Wolff, Sep 16 '13 at 08:52
i've already tried .live which is what has been suggested on previous questions. I have searched online but things i tried haven't worked. Apologies for a duplicate question but help is needed — Andy Holmes, Sep 16 '13 at 08:52
@AndyHolmes live() is removed from jq 1.9, use .on() with delegation syntax. What about reading link provided??? — A. Wolff, Sep 16 '13 at 08:54
I've only just seen your link, i was replying to your statement before. Thanks for the link — Andy Holmes, Sep 16 '13 at 08:56

Dhaval Marthak · Accepted Answer · 2013-09-16T08:59:31.927

1

Use jQuery eventDelegation:

Demo

    $(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');
    });

You can take the closest parent element instead the document.body :)

edited Sep 16 '13 at 08:59

answered Sep 16 '13 at 08:52

Dhaval Marthak

17,246
6
46
68

oh! i totally see what you meant now. Simple solution, thanks so much – Andy Holmes Sep 16 '13 at 08:53

score 0 · Answer 2 · answered Sep 16 '13 at 08:52

0

try this

DEMO

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

answered Sep 16 '13 at 08:52

Pragnesh Chauhan

8,363
9
42
53

jquery append works fine on first block of html but doesnt work on dynamically added html

2 Answers2