【发布时间】：2016-09-16 16:14:37
【问题描述】：
我的 Jquery 可克隆元素不可点击。我想要的是克隆的 li 元素在单击时具有绿色背景。当克隆的元素被拖放到可放置的 div 中时，它们会停止使用我的 Jquery 脚本，特别是这个脚本：
$(".canvas li").on("click", function(){ $(".canvas li").css("backgroundColor", "green"); });.
我尝试了多种解决方案，例如 .clone(true) 或 .clone(true, true)，我什至用谷歌搜索了它，但我发现的结果并没有解决我的问题，所以这不是重复的。
...
<pre><code>
$(document).ready(function() {
var counts = [0];
$(".add-element").draggable({
// use a helper-clone that is append to "body" so is not "contained" by a pane
helper: function() {
return $(this).clone(true).removeClass("add-element").appendTo(".canvas").css({
"zIndex": 5
}).show();
},
start: function() { counts[0]++},
cursor: "move",
containment: "document"
});
$(".canvas, .canvas *").droppable({
accept: ".add-element",
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
$(this).append($(ui.draggable).clone(true).removeClass("ui-draggable").removeClass("dropped"));
var prr = $(' <style>* { box-sizing: border-box;}.columns { float: left; width: 33.3%; padding: 8px;}.price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;}.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}.price .header { background-color: #111; color: white; font-size: 25px;}.price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center;}.price .grey { background-color: #eee; font-size: 20px;}.button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px;}@media only screen and (max-width: 600px) { .columns { width: 100%; }}</style><h2 style="text-align:center">Here is Product Tables</h2><div class="columns"> <ul class="price"> <li class="header" onclick="mfunction()">Foods</li> </ul></div><div class="columns"> <ul class="price"> <li class="header" style="background-color:#4CAF50">Clothings</li> </ul></div><div class="columns"> <ul class="price"> <li class="header">Phones</li> </ul></div>');
$(".columns").sortable();
$('.canvas .add-element').addClass("gog-"+counts[0]);
$(prr).appendTo(".gog-"+counts[0]);
$(".canvas .header").addClass("pricet");
$(".canvas .mm").remove();
$(".canvas .pricet").removeClass("add-element");
}
}).sortable({
placeholder: "sort-placer",
cursor: "move",
helper: function (evt, ui) {
return $(ui).clone(true).appendTo(".canvas").show();
}
});
// here is the place that i'm struggling with
$(".canvas .columns .price li").on("click", function(){
$(".canvas .columns .price li").css("backgroundColor", "green");
});
});
...
<pre><code> body { padding:0; margin:0; font:15px arial; }
.navbar { padding:5px; }
.navbar[align=center] > * { display:block; cursor:pointer; width:95%; padding:5px; color:#fff; text-align:center; }
.navbar .header { background:#66d; }
.navbar .div { background:#6dd; }
.navbar .span { background:#6d6; }
.navbar .footer { background:#d66; }
.noselect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.navbar {
position:absolute;
top:0; right:0; bottom:0;
width:300px;
background:#333;
}
.canvas {
position:absolute;
top:0; left:0; right:300px; bottom:0;
background:#ccc; overflow: auto;
}
.sort-placer {
border:2px solid orange;
}
...
<pre><code>
<div class="canvas"></div>
<div class="navbar" align="center">
<header class="header noselect add-element">products</header>
</div>
** 所以这里是 CodePen：CodePen
【问题讨论】：
-
当您克隆一个元素并插入该克隆时，您有一个旧事件处理程序尚未注册的新元素。您应该使用委托给静态父元素的事件处理程序。
标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable jquery-clone