Question

I have a form that contains field sets and has the ability to add a new section (clone of a previous field set). I can toggle between the original field sets fine but when I add a new section only the originals work. I believe that there may be an issue with the fact that the new section is nestled within a div.

My code and example are listed here -> http://jsbin.com/aqijuh

Thanks.

Answer 1

You have to use on because you are adding the elements dynamically. If you using jQuery < 1.7 then you should use delegate. Try this

Using on

$(document).on('click', '[id^="button"]', function () {
    $(this).closest('legend').next('div').toggle('slow');
});

Using delegate

$(document).delegate('click', '[id^="button"]', function () {
    $(this).closest('legend').next('div').toggle('slow');
});