Sil*_*ght 3 jquery jquery-ui jquery-ui-dialog
我在页面上有几个链接,我想为每个链接显示单独的jQuery对话框.这是标记:
<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,但我希望它足以理解这个问题.
任何帮助将不胜感激.
实际上我遇到了类似的问题,并且从这里得到一些提示我解决了它.
基本上我正在创建一个带有"show-popup-link"类的链接,它会在单击时打开以下元素作为弹出窗口.
<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>
在页面加载后我正在执行这个javascript方法:
function SetupShowPopupLink() {
$("a.show-popup-link").click(function () {
var $link = $(this);
var dialogClone = $link.next().clone();
$link.next().dialog({
title: "title",
close: function () { $link.after(dialogClone); }
});
});
}
基本上我在对话框函数将它移动到页面末尾之前克隆我正在显示的元素作为弹出窗口,然后我在链接之后插入它(它在开头隐藏,并在再次插入时隐藏).
我唯一担心的是,弹出窗口可能会显示一些内存泄漏,但可能不是因为这应该由jquery-ui处理.
我希望这适合你.