JQuery.clone () and Microsoft Explorer (bug?)

Question

I am having some problems with Microsoft Explorer 6/7 and the jQuery clone feature. I am using jQuery:

$(function() { $('#addFields').click(function() { var newCredit = $('#original').clone(); // create new set newCredit.find('input').val(''); // empty input fields $(this).before(newCredit); // append at the end return false; }); }); 

The html form is as follows:

 <div id="original"> <li id="prodEnt" > <label class="description" for="entity[]">Entity </label> <div> <input name="entity[]" class="element text medium" type="text" value="" /> </div> </li> <li id="entFunc" > <label class="description" for="element_5">Function </label> <div> <input name="function[]" class="element text medium" type="text" value="" /> </div> </li> <li class="section_break_small"></li> </div> 

The Microsoft browser cannot replicate more than one clone and does not create (css) new elements.

Please advise me on a friendly alternative! Thanks.

Answer 1

You cannot / should not have <li> elements without a parent <ul> . In addition, you cannot / should not have <div> elements inside <li> , as you have. Finally, you have id attributes in the HTML that is being cloned, and this will result in duplicate elements with the same id . If you replace the outer original div and make it <ul> , get rid of the id attributes and make a class instead, this should be fine.

All that was said, it works for me in IE7 .

EDIT

In response to your comment:

To select only the first, do this (if it has a fields class):

 $('ul.fields').eq(0).clone();