克隆时的jQuery可拖动元素不可拖动
Posted
技术标签:
【中文标题】克隆时的jQuery可拖动元素不可拖动【英文标题】：Jquery draggable element when cloned not draggable 【发布时间】：2013-06-07 08:19:03 【问题描述】：在查看了所有 jquery 可拖动克隆可能的重复项后，我仍然无法找到必须是相当普遍的问题的答案。
我有一系列可以成功克隆的 DIV 元素，但是每个克隆都失去了它的可拖动功能，我查看了生成的代码，仍然无法弄清楚为什么会这样。
请问有什么线索吗？
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Cloning issue</title>
<style>
.bgblue
background-color:#9CF;
.bgred
background-color:#F36;
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/ui/jquery-ui-1.10.3.custom.min.js"></script>
<script>
function seCopyBox(x)
z = $('.seBox').eq(x).clone();
z.insertAfter($('.seBox').eq(x));
$(function()
$( ".seBox" ).draggable();
);
</script>
</head>
<body>
<div class="seBox bgblue">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div A</p>
</div>
<div class="seBox bgred">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div B</p>
</div>
<div class="seBox bgblue">
<p onClick="javascript:var x=$(this).closest('.seBox').index();seCopyBox(x)">COPY</p>
<p>Div C</p>
</div>
</body>
【问题讨论】：
如果你想在克隆的元素上保存事件，把 true 放在括号内：像这样 clone(true)。 【参考方案1】：在克隆元素附加到 DOM 后再次调用 draggable()
function seCopyBox(x)
z = $('.seBox').eq(x).clone();
z.insertAfter($('.seBox').eq(x)).draggable();
我会使用干净的 jquery click 函数而不是内联 javascript..
$(document).on('click','.seBox p',function()
var x=$(this).closest('.seBox').index();
var z = $('.seBox').eq(x).clone();
z.insertAfter($('.seBox').eq(x)).draggable();
删除内联 javascript 和 seCopyBox 函数...
【讨论】：
看起来要走的路，甚至 z 应该是本地的，不是吗？！ 是啊！！！谢谢@roasted（再次......今天第三次让我知道我的错误......）:)......让我告诉你，你的眼睛很好...... 这不是你的错，更多的是 OP 犯的错误 ;) 这行得通 - 谢谢！也感谢您提供额外的干净 jquery 建议，非常感谢！【参考方案2】：.draggable() 最好放在克隆的元素上。
$(document).on('click','.seBox p',function()
var x=$(this).closest('.seBox').index();
var z = $('.seBox').eq(x).clone().draggable();
z.insertAfter($('.seBox').eq(x));
改为
$(document).on('click','.seBox p',function()
var x=$(this).closest('.seBox').index();
var z = $('.seBox').eq(x).clone();
z.insertAfter($('.seBox').eq(x)).draggable();
只是我的建议。
【讨论】：
感谢您的建议，我不知道 - 这是什么原因？ 在所有解决方案中，这是让它发挥作用的关键，谢谢！以上是关于克隆时的jQuery可拖动元素不可拖动的主要内容，如果未能解决你的问题，请参考以下文章
jQuery-UI 可拖动克隆 - 启动处理程序是不是收到对被克隆元素的任何引用？