以下のコードを使用して、jQuery UI Dialog ウィジェットを動的に作成します。
$(function () {
var Selector = $("a:contains('sometext')");
$(Selector).bind('click', function () {
var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
$('body').append(NewDialog);
$('#MenuDialog').html(DialogContetn);
$('#MenuDialog').hide();
$('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
$("#btnCloseDialog").live('click', function () {
$("#MenuDialog").dialog('close');
});
return false;
});
});
初めて読み込まれると、jQuery ダイアログは正常に動作し、btnCloseDialog をクリックすると、jQuery ダイアログが正常に閉じます。
しかし、その後、btnCloseDialog はダイアログを閉じなくなりました。なぜこのようなことが起こるのでしょうか?
アップデート
私は自分のコードをjsfiddle。
これは奇妙な動作です。jsFiddle ではボタンによってダイアログが適切に閉じられるのですが、私のプロジェクトのダイアログでは閉じられないからです。
ベストアンサー1
これは、jQuery で動的ダイアログを作成するための検索の早い段階で表示されるため、これを行うためのより良い方法を紹介したいと思います。ダイアログの div とコンテンツを HTML に追加して呼び出す代わりに、次のように HTML を直接 jQuery オブジェクトに押し込むことで、これをはるかに簡単に行うことができます。
$(function () {
$("a:contains('sometext')").click(function() {
var NewDialog = $('<div id="MenuDialog">\
<p>This is your dialog content, which can be multiline and dynamic.</p>\
</div>');
NewDialog.dialog({
modal: true,
title: "title",
show: 'clip',
hide: 'clip',
buttons: [
{text: "Submit", click: function() {doSomething()}},
{text: "Cancel", click: function() {$(this).dialog("close")}}
]
});
return false;
});
});
また、ボタンに live() 関数をアタッチする代わりに、インライン関数を使用して複数のボタンを配置する方法も示しました。このメソッドをいくつかの場所で使用しましたが、うまく機能しています。フォームもサポートされています (doSomething() でデータを取得して Ajax 経由で送信しましたが、他のメソッドも機能します)。