Question

我进行了各种研究，但我找不到解决问题的方法。我使用css创建了一个下拉选择以更改背景颜色，但是当我尝试使用Javascript克隆它时，新副本不会更改选择中的属性，因此它保留原始颜色。试试吧，添加一些副本并尝试更改颜色。

我是新来的，我不能添加代码，所以这里尝试：

http://jsfiddle.net/gabry501/FUyA3/ 或者github

https://github.com/gabry501/Test-Color/blob/master/test.html

HEAD

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script type="text/javascript">

function cloning() {

    var container = document.getElementById('fine');
    var clone = document.getElementById('contenitore').cloneNode(true);
    container.appendChild (clone);

}

STYLE

select option,
select {
    background-color:white;
    width:200px;
    height:200px;
}

select option[value="1"],
select.o1
{
    background-color:blue;
}

select option[value="2"],
select.o2
{
    background-color:red;
}

select option[value="3"],
select.o3
{
    background-color:orange;
}

BODY

<div style="width:1100px;
height:250px;" id="contenitore">

SCRIPT

<script>$('select[id$=-status][id^=id_item-]').children().each(
    function (){
        if($(this).val() == 0){
            $(this).css('backgroundColor','white');
        }
        if($(this).val() == 1){
            $(this).css('backgroundColor','green');
        }
        if($(this).val() == 2){
            $(this).css('backgroundColor','red');
        }
        if($(this).val() == 3){
            $(this).css('backgroundColor','orange');
        }
    }
);</script>

<script>    
$('select[id$=-status][id^=id_item-]').change(function (){
    var color = $(this).find('option:selected').val();

    $(this).removeClass('o1 o2 o3').addClass('o' + $(this).find('option:selected').val());
}).change();

Answer 1

您似乎依赖于侦听器来修改样式。使用addEventListener添加的听众不包含在cloned element中，您必须单独附加它们。

请注意，内联或使用attachEvent添加的侦听器已克隆。

Answer 2

您必须使用$('.el').live('change', fn)而不是$('.el').change(fn)，因为您在加载DOM后添加了一个元素。

请参阅此jsfiddle：http://jsfiddle.net/FUyA3/1/

Answer 3

cloneNode()仅复制相关元素的数据。它不会复制事件侦听器。你需要手动完成..

使用jQuery clone（）方法..

function cloning() {

        var container = document.getElementById('fine');
        var clone = $(document.getElementById('contenitore')).clone(true);
        $(container).append(clone);

    }

<强> Check Fiddle

PS：你的代码看起来也很麻烦。你可以缩小它..

<强>更新我对代码做了一些更改。

1。）从HTML中删除了click事件并将其添加到脚本中。

2。）删除 ID 并替换为className，因为文档中的ID应该是
独特。

3。）删除了额外的样式并替换为简单的类名。

4。）最好为样式和脚本提供单独的文件，而不是将其包含在HTML中。

5.如果您希望它工作，请将样式和脚本移动到相应的标签I 有标记..

<强> HTML

 <!doctype html>
    <html>
       <head>
         <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            // Add the Styles here
        </style>
      </head>

       <body>
          <div style="width:1100px; height:250px;" class="contenitore">
             <select  name="item-0-status">
                <option value="" disabled="disabled" class="optionGroup">SELECT 
                      COLOR</option>
                <option value="1"> BLUE</option>
                <option value="2"> RED </option>
                <option value="3"> ORANGE</option>
             </select>
          </div> <!--Contenitore -->

          <div id="fine"></div>

          <br>
          <div id="bottone">
          <input id="btn" type="button" Value="ADD">
         </div>
           <script type="text/javascript">
               // Script Comes Here
           </script>           

       </body>
    </html>

<强>的Javascript

$(function() {
    $('select[name="item-0-status"]').change(function() {
        $(this).removeClass('o1 o2 o3').addClass('o' + $(this).val());
    }).change();

    $('#btn').on('click', function() {
        var container = document.getElementById('fine');
        var clone = $(document.getElementsByClassName('contenitore')[0]).clone(true);
        $(container).append(clone);
    });
});

<强>样式

#bottone
{
   float:left;
   text-align:left;
   clear:left;
   margin-top:20px;
}

select option,select 
{
   background-color:#FFF;
   width:200px;
   height:200px;
}

.o1
{
    background-color:blue;
}

.o2
{
   background-color:red;
}

.o3 
{
   background-color:orange;
}

<强> UPDATED FIDDLE

Answer 4

尝试深度克隆 - 即 $（选择器）.clone（true） ....然后事件也将被克隆

克隆div和更改属性

4 个答案: