jQuery对话框打开2个对话框并删除元素
问题描述:
我想在某些图标上设置多个对话框,但它会打开2个对话框,其中一个是空的,另一个是正确的。它也会删除被点击的图标。jQuery对话框打开2个对话框并删除元素
var opt = {
draggable: false,
modal: true,
width: 600,
resizable: false,
autoOpen: false
};
$('.vfInfoIcon').each(function(){
bindInfoIconClick($(this), opt);
});
bindInfoOnClick:
function bindInfoIconClick(obj, opt){
obj.off().on("click",function(e){
e.stopPropagation();
e.preventDefault();
var infoText = $(this).data('info');
var dialog = $('div[data-info="' + infoText +'"]');
opt.title = dialog.data('title');
dialog.dialog(opt).dialog('open');
}); }
的元件接收点击:
<div class="vfInfoIcon" data-info="someInfo"></div>
它具有内容的元素:
<div class="infoText" data-info="someInfo" data-title="TITLE">
答
如果我理解正确的话你的问题, jquery对话框不能以你打算做的方式使用。你的描述缺乏一些细节,所以我假设了一些东西。
下面的例子就像你需要的东西,我猜。 希望它能适应你的情况。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="vfInfoIcon" style="border: 1px solid #000" "data-info="someInfo">1. click inside this DIV for dialog
<img src="https://www.gravatar.com/avatar/7b118e7ce745b1e84911c890f1179eb0?s=48&d=identicon&r=PG&f=1" alt="" height="24" width="24">
<div class="infoText" data-info="someInfo" data-title="TITLE_0"></div>
</div>
<div class="vfInfoIcon" style="border: 1px solid #000" data-info="someInfo">2. click inside this DIV for dialog
<img src="https://www.gravatar.com/avatar/7b118e7ce745b1e84911c890f1179eb0?s=48&d=identicon&r=PG&f=1" alt="" height="24" width="24">
<div class="infoText" data-info="someInfo" data-title="TITLE_1"></div>
</div>
<script type="text/javascript">
function bindInfoIconClick(obj, opt) {
obj.off().on("click",function(e) {
e.stopPropagation();
e.preventDefault();
var infoText = obj.data('info');
var dialog = obj.children('div');
opt.title = dialog.data('title');
$("#dialog").dialog(opt).dialog('open');
});
}
var opt = {
draggable: false,
modal: true,
width: 600,
resizable: false,
autoOpen: false
};
$('.vfInfoIcon').each(function() {
bindInfoIconClick($(this), opt);
});
</script>
<div id="dialog" title="Dialog">
<p>Some text. Blahh blahh...</p>
</div>
<input type="button" id="button" value="Click to open the dialog">
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false
});
$("#button").on("click", function() {
$("#dialog").dialog("open");
});
});
</script>
</body>
</html>