.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

Question

我有一个div元素，其id属性为“ selectAll ”。使用jQuery的 .clone（）方法我使用jQuery的 .prop（）方法克隆该元素并将其 id 属性更改为新元素。克隆该元素并将其id更改为新元素的过程多次执行，具体取决于用户输入。所以，现在我有一个id属性值为“ selectAll ”的元素，并且它的许多克隆都更改了id。

在具有id属性值“ selectAll ”的元素中，有一个类名为“ period ”的选择框。我想要的是当用户更改该选择框中的值时，其最近的父ID应显示在警告框中。在选择框和'selectAll'之间没有具有id属性的元素。

当用户更改原始div元素中的选择值时，警告框会显示“ selectAll ”，这是正确的。但问题是，只要用户更改克隆元素中的选择值，警报框就不会出现。

$("#docsUpload").change(function() {
   $("#multiShow").empty();                 // removes child elements
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    var ff = result[0];
    $("#ff").html("<strong> File Name : </strong>"+ ff.name);

    for(var x = 0;x< result.length-1;x++){
       var fle = result[x+1];
       $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
       $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name);
       $('#multiShow').append("</div><div class='col-sm-3'></div></div>");
       $("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
    }
});


$(document).ready(function() {
  $(".static").show(); // always display on page load
  $(".period").on('change', function() { //selection box value changed

    var realId = $(".period").closest("div[id]").attr("id"); //get id
    alert(realId); // display id in alert box (only shows 'selectAll')


    // below code can be ignored
    $('.dateSelector').hide();
    var operation = ' .' + this.value;
    $(operation).show();
  }); // on period change
}); // document ready state

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />


<div id="selectAll">
        <select name="period" class="period">
          <option value="static" selected="selected">Static</option>
          <option value="monthly">Monthly</option>
          <option value="quaterly">Quaterly</option>
          <option value="semester">Semester</option>
          <option value="yearly">Yearly</option>
          <option value="other">Other</option>
        </select>
 </div>

 <div id="multiShow"> </div>

Answer 1

调用.clone()时，将 true 作为第一个参数传递，以便复制事件和数据。

.clone（[withDataAndEvents] [，deepWithDataAndEvents]）


说明：创建匹配元素集的深层副本。

参数：

withDataAndEvents （默认：false）
  输入：Boolean
  一个布尔值，指示是否应将事件处理程序与元素一起复制。从jQuery 1.4开始，元素数据也将被复制。

deepWithDataAndEvents （默认：value of withDataAndEvents）
  输入：Boolean


一个布尔值，指示事件处理程序和所有子项的数据   应该复制克隆元素。默认情况下，其值与第一个参数的值（默认为false）匹配。

所以改变这一行：

$("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');

为：

$("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');

更新 - 找到正确的容器div（带id属性）：

然后在选择列表上方找到div的id时，接受事件处理程序回调中的changeEvent参数并遍历DOM（使用.closest()）以查找具有id属性的div。当前代码只使用类名 period 的第一个元素，并找到带有id属性的closing div元素。它需要依赖于事件的 target 元素。

所以改变这个事件处理程序：

$(".period").on('change', function() { //selection box value changed
    var realId = $(".period").closest("div[id]").attr("id"); //get id

像这样：

$(".period").on('change', function(changeEvent) { //selection box value changed
    var realId = $(changeEvent.target).closest("div[id]").attr("id"); //get id

$("#docsUpload").change(function() {
   $("#multiShow").empty();                 // removes child elements
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    var ff = result[0];
    $("#ff").html("<strong> File Name : </strong>"+ ff.name);

    for(var x = 0;x< result.length-1;x++){
       var fle = result[x+1];
       $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
       $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name);
       $('#multiShow').append("</div><div class='col-sm-3'></div></div>");
       $("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
    }
});


$(document).ready(function() {
  $(".static").show(); // always display on page load
  $(".period").on('change', function(changeEvent) { //selection box value changed

    var realId = $(changeEvent.target).closest("div[id]").attr("id"); //get id
    alert(realId); // display id in alert box (only shows 'selectAll')


    // below code can be ignored
    $('.dateSelector').hide();
    var operation = ' .' + this.value;
    $(operation).show();
  }); // on period change
}); // document ready state

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectAll">

    <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />

        <select name="period" class="period">
          <option value="static" selected="selected">Static</option>
          <option value="monthly">Monthly</option>
          <option value="quaterly">Quaterly</option>
          <option value="semester">Semester</option>
          <option value="yearly">Yearly</option>
          <option value="other">Other</option>
        </select>
      </div>


  <div id="multiShow"> </div>

Answer 2

克隆函数不克隆元素事件侦听器和元素数据。你必须使用：

element.clone(true, true);

更多信息： https://api.jquery.com/clone/

没有在jQuery中获得克隆的div元素的id

2 个答案:

.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

参数：

更新 - 找到正确的容器div（带id属性）：