Question

我正在使用jquery snap-to-increment slider和select2.js for dropdowns。当我点击.append-new-skills课程时，它应该克隆div，滑块并选择下拉列表。

它确实克隆了所有这些元素，但遗憾的是它们无论如何都无法点击或功能，只是在视觉上呈现。

我了解HTML id标记必须是唯一的，但不确定合并所有这些元素的最佳方式。

我的问题：在初始页面加载后，如何在加载到DOM中时使每个新添加的元素都起作用？

<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');
});

提前感谢您的帮助。

Answer 1

试试这个http://jsfiddle.net/aamir/V9nfE/7/

$（function（）{

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

Answer 2

我认为您必须使用克隆过程将事件绑定到每个克隆。

我的意思是：

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

像这样，您可以将功能或初始化添加到要执行的元素中。

克隆元素克隆到DOM后不起作用？

2 个答案: