没有得到克隆div元素在jQuery中的ID

Question

我有一个div元素，其id属性是“selectAll”。使用jQuery的.clone（）方法我使用jQuery的.prop（）方法克隆该元素并将其属性更改为新的元素。根据用户输入，克隆该元素并将其ID更改为新元素的过程多次完成。所以，现在我有一个id属性值为“selectAll”的元素，并且它的许多克隆具有更改的id。

内的id属性值“全选”此元素与类名“期间”一个选择框。我想要的是，当用户更改该选择框中的值时，应将其最近的父级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>