使用jquery从变量添加html元素？

Question

我正在尝试将元素添加到特定的div，但不使用clone()，因为每次添加时我都需要原始元素的新鲜副本，主要是因为元素是可拖动的并且它们的值正在被用户更改？所以我的 html 是变量，我需要获取这些元素并在单击时将它们添加到另一个 elem 中。 ？

$(document).ready(function (e) {

var $gElem = $(
    '<div class="distributionWrapper" id="element_0">' +
        '<div class="cbox cboxQuarterWidth">'  +         
            '<select id="combobox100">'+
                '<option>1</option>'+
                '<option>2</option>'+
            '</select>'+
        '</div>'+
        '<div class="help"><a href="javascript:;"></a></div>'+
        '<div class="cbox cboxEighthWidth"><span>'+
            '<select id="combobox200" name="PeriodId">'+
                '<option>1</option>'+
                '<option>2</option>'+
            '</select>'+
        '</span></div>'+
        '<div class="clear" id="clearDistribution"><a href="javascript:;"></a></div>'+
        '<div class="add" id="addDistribution"><a href="javascript:;"></a></div>'+
    '</div>'
);

    $('.mainSearch').html($gElem); // initial load of element
    $("#combobox100").combobox();
    $("#combobox200").combobox();

var counter = 1;
$('.add').live('click', function () {
    if ($('.distributionWrapper').length === 6) return;
    //var el = $('.distributionWrapper:first').clone().attr('id', 'element_' + ++counter).appendTo('.mainSearch');
    $('.mainSearch').add($gElem).attr('id', 'element_' + ++counter);
     // here on click add gElem to .mainSearch and set atribute to .distributionWrapper

});

$('.clear').live('click', function () {
    if ($('.distributionWrapper').length === 1) return;
    $(this).parents('.distributionWrapper').remove();
});

});

有什么想法吗？

Answer 1

试试这个

$('.mainSearch').append($gElem);
$('.mainSearch').children('.distributionWrapper:last').attr('id', 'element_' + ++counter);

Answer 2

将 html 作为字符串存储在 JavaScript 变量中，并在每次需要该字符串时创建一个 jQuery 元素。

var elemHtml = 
'<div class="distributionWrapper" id="element_0">' +
    '<div class="cbox cboxQuarterWidth">'  +         
        '<select id="combobox100">'+
            '<option>1</option>'+
            '<option>2</option>'+
        '</select>'+
    '</div>'+
    '<div class="help"><a href="javascript:;"></a></div>'+
    '<div class="cbox cboxEighthWidth"><span>'+
        '<select id="combobox200" name="PeriodId">'+
            '<option>1</option>'+
            '<option>2</option>'+
        '</select>'+
    '</span></div>'+
    '<div class="clear" id="clearDistribution"><a href="javascript:;"></a></div>'+
    '<div class="add" id="addDistribution"><a href="javascript:;"></a></div>'+
'</div>'

$(function(){
    //your initial element
    var $elem1 = $(elemHtml);
}

function someHandler(){
    //you can create fresh new elements anywhere without cloning
    var $elem2 = $(elemHtml);
}

需要删除重复的 ID。但这超出了您的问题范围。