gpt4 book ai didi

jquery - 我无法选择为克隆动态创建的元素

转载 作者:行者123 更新时间:2023-11-28 02:25:29 25 4
gpt4 key购买 nike

问题很简单,我无法选择一个动态创建的元素。

因为我不能选择,所以我不能克隆带虚线的边框。

我的应用图片:

I can not select element created dynamically

小米代码HTML:

<ul>
<li class="a">Hello <button class="clone">Clone</button></li>
<li class="a">Stack <button class="clone">Clone</button></li>
<li class="a">Overflow <button class="clone">Clone</button></li>
</ul>

我的 jQuery:

$(function() {
var wrapper = $("<div class='wrapper' /></div>");
$(".a").wrap(wrapper);
});

$(document).on("click",".clone",function() { // FUNCTION CLONE <LI ELEMENT>

//$($(this).parent().parent().html()).insertAfter($(this).parent().parent());//Wrong

$($(this).parent().parent().html()).clone().insertAfter($(this).parent().parent());//Wrong

});

小米 CSS:

.wrapper {
position: relative;
background-color: #ccc;
padding: 1em;
margin-bottom: 4px;
border: 2px dashed black;
}
.clone{
background: DeepSkyBlue;
padding: 4px;
position: absolute;
right: 10px;
top: 10px;
}
ul{padding:1em;}

我的在线代码(看懂了):

http://jsfiddle.net/3vcho8jt/

*注意:我的英文很差。

最佳答案

首先:div 不是 ul 的有效子项,因此将您的 LI 包装到 div 中是不行的。而是将您的样式类添加到 LI 元素。
而不是简单地使用 .closest() 来获取按钮最近的选择器,然后使用 .clone() 它。比你可以使用 .after() 做插入:

jQuery(function($) { // DOM ready and $ alias secured

// DIV is not a valid UL child! Add .wrapper class to LI instead
$("ul li.a").addClass('wrapper');

$(document).on("click", ".clone", function() {
var $li = $(this).closest('li'); // Get the closest .wrapper AKA: LI element
var $clone = $li.clone(); // Create a clone
$li.after($clone); // Yep
});

});
.wrapper {
position: relative;
background-color: #ccc;
padding: 1em;
margin-bottom: 4px;
border: 2px dashed black;
}

.clone {
background: DeepSkyBlue;
padding: 4px;
position: absolute;
right: 10px;
top: 10px;
}

ul {
padding: 1em;
}
<ul>
<li class="a">Hello<button class="clone">Clone</button></li>
<li class="a">Stack<button class="clone">Clone</button></li>
<li class="a">Overflow<button class="clone">Clone</button></li>
</ul>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

关于jquery - 我无法选择为克隆动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54384149/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com