Question

我发现在匹配的元素中没有加载使用load()加载的Jquery对话框。这是我的父文件：

<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {

    $('#button1').click(function() {
      $('#loaded-dialog-wrapper').load('child.html');
    });
  });
  </script>
</head>

<body>
  <button id='button1'>Click</button>

  <div id='loaded-dialog-wrapper'></div>
</body>

</html>

和包含已加载对话框的文档：

<script>
$(document).ready(function(){
var dialogOpts = {
  width: 600,
  height: 400,
  modal: true,
  autoOpen: false,
  draggable: false,
  buttons: [{text: "Close", click: function() { $(this).dialog("close");} }],
};

$('#loaded-dialog').dialog(dialogOpts);
$('#loaded-dialog').dialog('open');

});
</script>

<div id='loaded-dialog'>
  <p>Text</p>
</div>

#loaded-dialog-wrapper已加载，但不包含#loaded-dialog;它只有script节点。相反，#loaded-dialog包含在作为子节点添加到div节点的body中。如果我关闭对话框，对话框就会消失，当我再次单击该按钮时，将显示对话框，并以与以前相同的方式创建新的div。如果我更改#loaded-dialog内的内容，则在第二个打开时，显示的对话框不包含更新的内容。但是，包含新内容的#loaded-dialog包含在第二个创建的div。

中

Answer 1

将对话框选项移动到主文档中。然后将点击直接分配给loaded-dialog-wrapper：

$('#button1').on('click',function() {
  $('#loaded-dialog-wrapper').dialog(dialogOpts).html('Place your message here');
});

您不需要第二个文档child.html

Answer 2

JqueryUI moves the dialog div inside another div，并将其添加为body节点的子节点。这是我观察到的。为了解决这个问题，我在关闭对话框时销毁了添加的div。这是在child.html中的dialogOpts中完成的：

var dialogOpts = {
  width: 600,
  height: 400,
  modal: true,
  autoOpen: false,
  draggable: false,
  buttons: [{text: "Close", click: function() { $(this).dialog("close");} }],
  close: function() {
    $('#loaded-dialog').dialog('destroy'); // To remove the Jquery stuff
    $('#loaded-dialog').remove(); // To remove the div
  },
};

Jquery对话框未在指定的div中加载

2 个答案: