Клонированные элементы не работают после клонирования в DOM?

0

Я использую слайдер jQuery snap-to-increment, а также select2.js для выпадающих меню. Когда я нажимаю на .append-new-skills он должен клонировать div, слайдер и выбрать раскрывающийся список.

Он клонирует все эти элементы, но они, к сожалению, не являются интерактивными или функциональными в любом случае, просто визуально присутствуют.

Я понимаю, что теги id HTML должны быть уникальными, но не уверены в том, как наилучшим образом включить все эти элементы.

Мой вопрос: как сделать каждый из добавленных элементов функциональным при загрузке в DOM после начальной загрузки страницы?

Инициализация Select Dropdown Внутри <head></head> теги:

    $(".select-some-skills").select2({
        placeholder: "+ Add Type",
        allowClear: true
    });

Начальная загрузка DOM (HTML):

        <div class="single-skill overflow-hidden">
            <div class="float-left select-skill-margin">
                <select class="jobseeker-skill-select select-some-skills"></select> 
            </div>  
            <div class="float-left slider-skill-margin">
                <span style="margin-left:-37px;" id="skill-level" class="center color-blue skill-level"></span>
                <div id="slider" class="slide">
                    <div class="inner-slider-marker"></div>
                </div>
            </div>
        </div>

JQuery:

$(function() {

    var sliderAmountMap = ["Beginner", "Average", "Intermediate", "Excellent", "Expert"];

    $("#slider").slider({
        value: 0, //array index of onload selected default value on slider, for example, 45000 in same array will be selected as default on load
        min: 0, //the values will be from 0 to array length-1
        max: sliderAmountMap.length-1, //the max length, slider will snap until this point in equal width increments
        slide: function( event, ui ) {
            $("#skill-level").text( sliderAmountMap[ui.value] ); //map selected "value" with lookup array

            var popover_movement = ( $("#slider").width() )/4;
            var half_span_width = ( $('#skill-level').width() )/2;

            if(sliderAmountMap[ui.value] == "Beginner"){
                popover_movement = 0;
            }else if(sliderAmountMap[ui.value] == "Average"){
                popover_movement = popover_movement*1;
            }else if(sliderAmountMap[ui.value] == "Intermediate"){
                popover_movement = popover_movement*2;
            }else if(sliderAmountMap[ui.value] == "Excellent"){
                popover_movement = popover_movement*3;
            }else if(sliderAmountMap[ui.value] == "Expert"){
                popover_movement = popover_movement*4;
            }

            popover_movement = popover_movement - half_span_width;

            console.log( popover_movement );
            $( "#skill-level" ).css("margin-left", popover_movement + "px");
        }
    });
    $( "#skill-level" ).text( sliderAmountMap[$( "#slider" ).slider( "value")] );//map selected "value" with lookup array
}); 

$(document).on('click', '.append-new-skill', function() {
    $('.single-skill:first').clone().appendTo('.dashboard-main-content');
});

Заранее благодарны за Вашу помощь.

  • 0
    попробуйте var clonedObj = $('.single-skill:first').clone(true); $('.dashboard-main-content').append(clonedObj);
  • 0
    Теперь это означает, что первый ползунок или блок выбора в DOM реагирует всякий раз, когда я взаимодействую с любым из клонированных ползунков или блоков выбора, так что на самом деле не то, что я отредактировал свой вопрос, чтобы дать более подробную информацию
Показать ещё 5 комментариев
Теги:
jquery-select2
uislider

2 ответа

2
Лучший ответ

Попробуйте это http://jsfiddle.net/aamir/V9nfE/7/

$ (функция() {

    var sliderAmountMap = ["Beginner", "Average", "Intermediate", "Excellent", "Expert"];
    var sliderOptions = {
        value: 0, //array index of onload selected default value on slider, for example, 45000 in same array will be selected as default on load
        min: 0, //the values will be from 0 to array length-1
        max: sliderAmountMap.length - 1, //the max length, slider will snap until this point in equal width increments
        slide: function (event, ui) {
            var $parent = $(ui.handle).closest('.dashboard-main-content');
            //console.log($parent);
            $parent.find(".skill-level").text(sliderAmountMap[ui.value]); //map selected "value" with lookup array

            var popover_movement = ($parent.find(".slider").width()) / 4;
            var half_span_width = ($parent.find('.skill-level').width()) / 2;

            if (sliderAmountMap[ui.value] == "Beginner") {
                popover_movement = 0;
            } else if (sliderAmountMap[ui.value] == "Average") {
                popover_movement = popover_movement * 1;
            } else if (sliderAmountMap[ui.value] == "Intermediate") {
                popover_movement = popover_movement * 2;
            } else if (sliderAmountMap[ui.value] == "Excellent") {
                popover_movement = popover_movement * 3;
            } else if (sliderAmountMap[ui.value] == "Expert") {
                popover_movement = popover_movement * 4;
            }
            popover_movement = popover_movement - half_span_width;
            console.log($parent);
            $parent.find(".skill-level").css("margin-left", popover_movement + "px");
        }
    }

    var copyOfParent = $('.dashboard-main-content').clone();

    function applySelect2() {
        $(".jobseeker-skill-select:last").select2({
            placeholder: "+ Add Type",
            allowClear: true
        });
    }

    applySelect2();


    $(".slider").slider(sliderOptions);
    $(".skill-level").text(sliderAmountMap[$(".slider").slider("value")]); //map selected "value" with lookup array

    $(document).on('click', '.append-new-skill', function () {
        $('#dashboard-main').append(copyOfParent.clone());
        $('.slider:last').slider(sliderOptions);
        applySelect2();
        $(".skill-level:last").text(sliderAmountMap[$(".slider:last").slider("value")]); //map selected "value" with lookup array
    });
});
Поделиться
  • 0
    Спасибо за это. Слайдер теперь работает при клонировании, но, к сожалению, я пытаюсь заставить работать область <select> после их клонирования. Я использую select2.js для моих выбранных областей. Так что это только ответ на часть моего вопроса.
  • 0
    Что вы хотите выбрать?
Показать ещё 3 комментария
0

Я думаю, вам просто нужно связать событие с каждым из этих клонов с процессом клонирования....

Я имею в виду

 $('.single-skill:first').clone().appendTo('.dashboard-main-content').click(function(e){
alert("hi");
});

например, вы можете добавить функциональность или инициализацию к элементу u, который хотите выполнить.

Я думаю, что это поможет вам... Если у вас есть проблема.. buzz me.. и проголосуйте за меня

Наслаждайтесь!

Поделиться
  • 0
    Я добавил скрипку. Ваш не работает, кстати. jsfiddle.net/V9nfE

Ещё вопросы

Сообщество Overcoder
Наверх
Меню