我正在使用下面的代码动态地创建一个jQuery UI对话框小部件：
$(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中正确关闭对话框，而不是在项目中的对话框上。
解决方法
因为在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,hide: 'clip',buttons: [
{text: "Submit",click: function() {doSomething()}},{text: "Cancel",click: function() {$(this).dialog("close")}}
]
});
return false;
});
});
我还展示了如何使用内置函数放置多个按钮，而不是在按钮上附加一个live()函数。我在几个地方使用过这个方法，它对我来说很好。它还支持表单(我抓取了doSomething()中的数据并通过ajax提交，但是其他方法也是这样)等等
