jQuery Dialogで2つのダイアログボックスが開き、要素が削除されます

いくつかのアイコンで複数のダイアログを設定したいのですが、2つのダイアログが開き、1つは空、もう1つは正しいダイアログが開きます。また、クリックされたアイコンを削除します。jQuery Dialogで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">

出典

2017-10-11 pwnh

を、 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>

出典

2017-10-12 07:58:45 svujic

jQuery Dialogで2つのダイアログボックスが開き、要素が削除されます

答えて

関連する問題