我在页面上有几个链接,我想为每个链接显示单独的jQuery对话框.这是标记： html body div class="container" a href="#" class="delete_link"delete/a !-- when this link is clicked, dialog should popup -- div class="dialo
<html>
<body>
<div class="container">
<a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
<div class="dialog_box"> <!-- this is the dialog for jquery UI -->
Pleasy specify a reson for your action
<textarea rows="5" cols="60"></textarea>
</div>
</div>
<div class="container">
<a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
<div class="dialog_box"> <!-- this is the dialog for jquery UI -->
Pleasy specify a reson for your action
<textarea rows="5" cols="60"></textarea>
</div>
</div>
</body>
</html>
和Javascript：
$(document).ready(function() {
$('.delete_link').click(function() {
alert('about to show jQuery dialog!');
var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
autoOpen: false,
title: 'You are going to delete a div!',
buttons: {
"Do delete": function() {
alert('You have entered:' + $(this).find('textarea').val());
$(this).dialog("close");
$(this).closest('DIV.container').hide(); //hiding div (primary action)
}
},
width: 800
});
d.dialog("open");
});
});
如您所见,触发事件的链接具有delete_link类和应该是jQuery UI对话框的DIV,具有dialog_box类.
问题：当打开Dialog并且用户按下“关闭”时,无法再次打开对话框.
根据google和SO搜索,我不是第一个遇到这个问题的人.这篇文章,例如：http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
看来,该对话框应该在click()动作之前以某种方式初始化,但是在所有解决方案中,页面上只有一个对话框,分配了id – 我不能将其应用于我的情况.
我试过这个,但它不起作用：
$(document).ready(function() {
//initializing
$('DIV.dialog_box').dialog({
autoOpen: false,
title: 'You are going to delete a div!',
buttons: {
"Do delete": function() {
alert('You have entered:' + $(this).find('textarea').val());
$(this).dialog("close");
$(this).closest('DIV.container').hide(); //hiding div (primary action)
}
},
width: 800
});
$('.delete_link').click(function() {
alert('about to show jQuery dialog!');
$(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
});
});
我在jsFiddle：http://jsfiddle.net/NQmhk/准备了演示
没有jQUery UI css,但我希望它足以理解这个问题.
任何帮助将不胜感激.
尝试在对话框按钮功能中调用对话框(“destroy”).