使用jqueryui'；s对话框（“销毁”）将元素放置在错误的位置？
我有一个很大的表格，有很多部分。对于每个部分，我想添加一个小按钮“弹出为对话框”，它将根据需要将该部分转换为对话框，然后（关闭对话框时）使用新输入返回表单 我正在使用jQueryUI的dialog（）函数。弹出部分工作正常-子窗体转换为对话框。但是，当我对子窗体进行对话框（“销毁”）时，元素会显示回来，但会显示在DOM文档的末尾，而不是原始位置 这是dialog（）的“功能”吗？有什么办法吗？使用jqueryui'；s对话框（“销毁”）将元素放置在错误的位置？,jquery,forms,dialog,popup,Jquery,Forms,Dialog,Popup,我有一个很大的表格，有很多部分。对于每个部分，我想添加一个小按钮“弹出为对话框”，它将根据需要将该部分转换为对话框，然后（关闭对话框时）使用新输入返回表单 我正在使用jQueryUI的dialog（）函数。弹出部分工作正常-子窗体转换为对话框。但是，当我对子窗体进行对话框（“销毁”）时，元素会显示回来，但会显示在DOM文档的末尾，而不是原始位置 这是dialog（）的“功能”吗？有什么办法吗？ 是否有更好的方法使用dialog（）完成此操作？也许可以添加一些代码，否则很难判断代码可能失败的位置/
是否有更好的方法使用dialog（）完成此操作？也许可以添加一些代码，否则很难判断代码可能失败的位置/原因 你可以这样做或类似的方式
<input id="text" name="textname" type="text">
<input
type="button"
value="Pop me up"
onclick="$('#text').clone().dialog({
modal:true,
close: function(event, ui) {
$('#text').val(this.value);
}
});"
>
检查样本是的，这是一个“功能”…哈哈…不久前遇到了它。下面是一些“gotchyas”，然后是一种非常简单的处理方法（尽管如果您计划有许多子表单，这种方法非常有效）：
- 当您创建一个对话框时，jquery会记住它，并将它存储在一个单独的div中，然后再也不会将它放回原处（是的，文档中的意思是元素永远不会回到原来的位置）
- 我的经验是，如果在此之后过多地处理隐藏元素，可能会破坏未来的对话框功能。最好只是从新内容创建一个新对话框（特别是如果您的应用程序有许多这样的内容……手工编写每个子表单会很快变得单调乏味）
- 如果不能重用div，则必须克隆并重命名它们（这是我下面要做的）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link type="text/css" href="ui.css" rel="stylesheet" />
<script type="text/javascript" src="j.js"></script>
<script type="text/javascript" src='ui.js'></script>
<script type="text/javascript">
$(document).ready(function() {
newDialogs(2);
});
function newDialogs(idCounter) {
$('#d1').unbind().bind('click', function() {
$('#d'+ idCounter.toString()).dialog({close: function(event, ui){
var newSubForm = $('#d'+idCounter.toString()).clone();
idCounter += 1;
newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', '');
$('#sub_form_container').append(newSubForm);
newDialogs(idCounter);
$('ui-dialog').remove()
}
});
});
}
</script>
</head>
<body>
<h1>Element above</h1>
<div>
<div id='d1'>Activate dialog</div>
<div id='sub_form_container'>
<div id='d2'>Dialog content <input type='text' /></div>
</div>
</div>
<h1>Element below</h1>
</body>
</html>
$（文档）.ready（函数（）{
新对话（2）；
});
函数新建对话框（idCounter）{
$（'#d1'）.unbind（）.bind（'click'，function（）{
$（'#d'+idCounter.toString（））.dialog（{close:function（event，ui）{
var newSubForm=$（'#d'+idCounter.toString（））.clone（）；
idCounter+=1；
newSubForm.attr（'id'，'d'+idCounter.toString（））.attr（'class'，''）.attr（'style'，''）；
$（'#sub_form_container'）。追加（newSubForm）；
新建对话框（idCounter）；
$（'ui-dialog'）。删除（）
}
});
});
}
上面的元素
激活对话框
对话内容
下面的元素
- 克隆对话框
- 初始化克隆对话框（使原始对话框保留在页面上）
- 完成克隆对话框后将其删除
$('a.popup-modal').click(function(e){
var $modal = $(this).closest('form').find('.modal').clone();
$modal.dialog({
autoOpen: true,
close: function(event, ui){
$(this).remove();
}
});
});
这太棒了。这比公认答案的方法简单。这是一个非常糟糕的“功能”，他们应该真的解决这个问题。非常有效。只需确保您没有使用
iddiv