Добавление элементов HTML из переменной с помощью jquery? - PullRequest
Новая
       18

Добавление элементов HTML из переменной с помощью jquery?

0 голосов
/ 19 января 2012

Я пытаюсь добавить элементы в определенный div, но не использую clone (), потому что мне нужно свежее копирование оригинальных элементов при каждом добавлении, в основном потому, что элементы перетаскиваются и их значения изменяются пользователем?Так что у меня есть мой HTML в переменной, мне нужно взять эти элементы и добавить их по щелчку к другому элементу.? 

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

});

Есть идеи?

Ответы [ 2 ]

1 голос
/ 19 января 2012

попробуйте 

$('.mainSearch').append($gElem);
$('.mainSearch').children('.distributionWrapper:last').attr('id', 'element_' + ++counter);
0 голосов
/ 19 января 2012

Сохраните 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);
}

Необходимо удалить повторяющиеся идентификаторы. Но это выходит за рамки вашего вопроса.

...