Question

I am having some issues with Microsoft Explorer 6/7 and the jQuery ‘clone’ function. The jQuery that I am using is:

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <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 is unable to replicate more than one clone and does not style (CSS) the new elements.

Please advise me to an IE friendly alternative! Thanks.

Answer 1

You can’t/shouldn’t have <li> elements without a parent <ul>. Furthermore, you can’t/shouldn’t have <div> elements inside the <li> like 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 a <ul>, get rid of the id attributes and make it a class instead, it should be fine.

All that being said, it does work for me on IE7.

EDIT

In response to your comment:

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

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