[英]Script within a jQueryUI modal dialog box only works once
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. 我有一个表,当单击任何行时,将启动一个jQueryUI模态对话框,以允许用户编辑该记录。 I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
我使用以下似乎有效的脚本,使用AJAX成功加载了相关记录的详细信息:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation. 第一次单击记录时它可以正常运行,但是如果单击“取消”并尝试编辑另一条记录,则对话框会出现(带有正确的记录详细信息),但是对话框中没有脚本起作用-例如: jqueryUI datepicker输入和一些验证。
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks! 没有javascript错误,并且从我对FireBug的有限了解中,我无法发现任何错误,因此,我希望获得一些有关如何进行操作的建议,谢谢!
EDIT: Argh!
编辑:啊!
Sometimes, it takes something like typing it out here to spot the obvious.
有时,需要花一些时间在此处键入内容以发现明显的内容。
I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes.
我只是意识到,对话框关闭时,为对话框创建的DIV不会被破坏。
I've added a line to do this and it now works.
我添加了一行来执行此操作,现在可以正常工作。
Thanks for listening.
谢谢收听。
:)
:)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function: 为了将来参考,我向在“变量对话框”中创建的DIV添加了一个ID,并在“取消”功能中将其删除:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour. 如果有人建议一种更好的方式来处理这种行为,我仍然感激不尽。
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes. 我已修复:关闭对话框时为对话框创建的DIV不会被销毁。
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function: 我在“变量对话框”中创建的DIV中添加了ID,并在“取消”功能中删除了DIV:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false. 您只能一次创建对话框,而不是在每次加载内容时都创建对话框,只需将autoOpen设置为false。
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.