克隆的元素在被克隆到 DOM 后不起作用？答案

【问题标题】：Cloned Elements Don't Work After Being Cloned To The DOM?克隆的元素在被克隆到 DOM 后不起作用？
【发布时间】：2014-04-07 17:19:39
【问题描述】：

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

它确实克隆了所有这些元素，但遗憾的是它们无论如何都不可点击或起作用，只是视觉呈现。

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

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

在<head></head>标签内初始化Select Dropdown：

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

提前感谢您的帮助。

【问题讨论】：

试试var clonedObj = $('.single-skill:first').clone(true); $('.dashboard-main-content').append(clonedObj);
这意味着当我与任何克隆的滑块或选择框交互时，DOM 中的 第一个滑块或选择框会做出反应，所以不是真的，我已经编辑我的问题以提供更多详细信息
请创建一个 jsfiddle
很遗憾我不知道怎么做。
只需转到 jsfiddle.net 并将您的 HTML 复制到 HTML 框中，将您的 jQuery 复制到 JavaScript 框，然后转到左侧边栏并包含您提到的库。保存它，然后给我们链接。

标签： jquery html jquery-ui uislider jquery-select2

【解决方案1】：

试试这个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
    });
});

【讨论】：

谢谢。滑块现在在克隆时可以工作，但不幸的是我试图让<select> 区域在它们被克隆后工作。我将 select2.js 用于我的选择区域。所以这只回答了我的部分问题。
你想要什么？
我目前正在使用这个 jquery 插件 ivaynberg.github.io/select2 来按照我想要的 CSS 样式设置我的 <select></select>。不幸的是，<select></select> 在被克隆后不起作用。我希望能够克隆 <select></select> 以及滑块。
立即尝试。选择也有效。我有更新的答案和链接。
多么棒的明星！你为我解决了这个烦人的问题。非常感谢您花时间提供帮助。我刚刚 +1 并接受了您的回答。再次非常感谢！

【解决方案2】：

我认为您只需使用克隆过程将事件绑定到这些克隆中的每一个。

我的意思是：

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

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

【讨论】：