jQuery的克隆多.find（）函數

Question

我有下面的代碼：

HTML：

<ul> 
    <li id="clonedInput0"> 
    <label> 
     <input type="file" accept="image/*" name="image_gallery[]" id="image_gallery" 
     class="image_gallery" style="display:none;" data-gallery="0"> 
     <p>Select image</p> 
     <div class="img_src"></div> 
     <div class="overlay-image" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div> 
    </label> 
    </li> 
    <div id="add_more" class="add-more"><img src="<?php echo get_template_directory_uri()?>/images/guateworks/add_image.png" alt="" width="50" /></div> 
</ul> 

的jQuery：

var cloned = jQuery(".photos ul li:first-child").clone() 
    .insertBefore(this) 
    .attr("id", "clonedInput" + cloneIndex) 
    .find("#image_gallery").removeAttr('data-gallery').attr('data-gallery',cloneIndex) 
    .find('.img_src').remove(); 

但不起作用。任何人知道爲什麼？

Answer 1

它將如下所示，在.clone（）部分之後，您不能添加更多功能，必須在克隆創建後調用這些功能。

var cloneIndex=2; 
 
var cloned = $(".photos ul li:first-child").clone(); 
 
console.log("clone "+cloned) 
 
cloned.insertBefore($(".photos ul li:first-child")).attr("id", "clonedInput" + cloneIndex).find("#image_gallery").removeAttr('data-gallery').attr('data-gallery',cloneIndex).find('.img_src').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="photos"> 
 
<ul> 
 
<li id="clonedInput0"> 
 
<label> 
 
<input type="file" accept="image/*" name="image_gallery[]" id="image_gallery" 
 
class="image_gallery" style="display:none;" data-gallery="1"> 
 
<p>Select image</p> 
 
<div class="img_src"></div> 
 
<div class="overlay-image" style="display:none;"> 
 
<i class="fa fa-circle-o-notch fa-spin"></i> 
 
</div> 
 
</label> 
 
</li> 
 
<div id="add_more" class="add-more"> 
 
<img src="" alt="" width="50" /> 
 
</div> 
 
</ul> 
 
</div>