Problem With Binding Events to Newly Cloned Elemtents.

[sayedtaqui]

I m creating a form where the user can add more fields and save their information. However I m having a hard time binding events to the newly cloned elements. The last clonned element works fine however the previous elements behave funny when there are more than 2 duplicated elements available . Please have a look at my code here.
http://jsbin.com/nacavato/2/edit

When you click on add more and try to slidedown the last tab, it works fine however the previous tab starts acting weird.

Any help, Thanks.

[sayedtaqui]

Wow, thanks a lot, that solved my problem. Just one more thing , I m trying to do some changes to the newly created element, like change the title from ‘celebrity 1 ‘ to celebrity 2, 3 and so on. And therefore I tried doing this

celebBoxDiv.appendTo(celebBoxSection);

inplace of celebBoxSection.append(celebBoxDiv);

If celebBoxDiv is just a bunch of html, why is not appendingTo celebBoxSection? And how do I manipulate these newly created elements?

Is it a good way of doing it?

            var clonedEl = firstBox.clone(true);
            clonedEl.find('header').find('p').html('clebrity 2');
            var celebBoxDiv = $('<div />').append(clonedEl).html();
            celebBoxSection.append(celebBoxDiv);

Thanks

[Author]

Posts