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/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屋！
