jQuery Dialog 打开 2 个对话框并删除元素答案

【问题标题】：jQuery Dialog opens 2 dialogs and removes the elementjQuery Dialog 打开 2 个对话框并删除元素
【发布时间】：2018-03-23 02:11:01
【问题描述】：

我想在某些图标上设置多个对话框，但它会打开 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">

【问题讨论】：

标签： javascript jquery jquery-ui dialog

【解决方案1】：

如果我正确理解您的问题，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&amp;d=identicon&amp;r=PG&amp;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&amp;d=identicon&amp;r=PG&amp;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>

【讨论】：