CODEWITHSUNDEEP
jqueryinternet-explorer
superUntitled
superUntitled

Reputation: 22527

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

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.

Upvotes: 4

Views: 4797

Answers (1)

Paolo Bergantino
Paolo Bergantino

Reputation: 488434

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

Upvotes: 5

Related Questions