jquery ui对话框在按钮和内容div上使用相同的类打开多个对话框 [英] jquery ui dialog open multiple dialog boxes using the same class on the button and the content div
问题描述
我想通过在按钮和内容div上使用相同的类来打开多个对话框。以下工作只是第一次。
i want to open multiple dialog boxes by using the same class on both the button and the content div. The below works but only for the first time.
jQuery('.helpDialog').hide();
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog({
autoOpen: true,
title: 'Help',
width: 500,
height: 300,
position: [180,10],
draggable: true,
resizable: false,
modal: false
});
return false;
});
我们知道这个
http://blog.nemikor.com/2009/04/08/basic-usage-of-the- jquery-ui-dialog /
第二个调用被忽略，因为对话框已经在该元素上被实例化了。
we know the reason for this http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ "the second call is ignored because the dialog has already been instantiated on that element."
但是，当我通过尝试下面的代码解决这个问题，对话框不再打开。
任何人都可以帮忙？
提前感谢
But when i fix that problem by trying the code below, the dialog box no longer opens. Can anyone help? Thanks in advance
jQuery('.helpDialog').hide();
jQuery(function() {
jQuery('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
});
});
jQuery('.helpButton').click(function() {
jQuery(this).next('.helpDialog').dialog('open');
return false;
});
推荐答案
你实际上需要一种不同的方法，直观的，像这样：
You actually need a different approach here, a non-intuitive one, like this:
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
为什么要这样做？因为 .dialog（） 将包含在对话框元素中的内容移动到结束< body> ，所以 .next（） 将不会再找到...通过使用 jQuery.data（） 我们正在保留对我们要打开的对话框的引用。
Why must you do this? because .dialog() moves the content it wraps in dialog elements to the end of the <body>, so .next() will no longer find it...by using jQuery.data() we're maintaining a reference to the dialog we want to open.
这篇关于jquery ui对话框在按钮和内容div上使用相同的类打开多个对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
