Was ist dieses Problem, und wie kann man auf jQuery's eigene Weise verhindern?

Question

Ich implementiere eine Append-Operation mit $.each - Methode. Das Ergebnis ist lustig (doppelt so viel Zeit für Elemente!). Ich habe möglicherweise eine Problemumgehung, um dies zu beheben.

Aber ich möchte das eigentliche Problem hier verstehen, gibt es auch eine Möglichkeit, dies zu beheben mit jQuery eigenen Weg?

Vielen Dank im Voraus.

var data = ["orange", "apple"]; 
 
var temp = function() { 
 
    var template = '<dl class="dropdown"><dt> <div class ="dropdownclass" ><span class="hida">Select</span> <span class="multiSel"></span> </div></dt><dd><div class="mutliSelect"><ul><li><input type="checkbox" value="Control" />Control Node</li><li><input type="checkbox" value="Border" />Border Node</li</ul></div></dd></dl>'; 
 
    return $(template).clone(); 
 
} 
 
$(document).ready(function() { 
 
    var tr; 
 
    var ut 
 
    $.each(data, function(i, value) { 
 
    tr = $('<tr />', { 
 
     id: i + 'id' 
 
    }); 
 
    ut = temp(); 
 
    ut.addClass('hema' + i).click(function() { 
 
     alert($(this).prop('class')); 
 
    }); 
 
    tr.append(ut); 
 
    tr.appendTo('tbody'); //getting multple instance!!! 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>title</th> 
 
    </tr> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>