0

我正在尝试使用 jQuery UI，尤其是对话框。首先我尝试了示例代码，它工作正常：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {   
$( "#dialog" ).dialog( "open" );
});

</script>
</body>
</html>

现在，我正在尝试在脚本中动态创建按钮和对话框，因此我将代码重写为：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>

// Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");

document.body.appendChild(open_button);


// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");

document.body.appendChild(my_dialog);

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>

</head>
<body>
</body>
</html>

现在它失败并出现错误“body is null”。这是为什么？

但即使我在体内创建虚拟 DOM：

<div id="dummy_div"></div>

...然后，在脚本中，将按钮和对话框都附加到它而不是正文，它仍然不起作用。

$("#dummy_div").append(open_button);
$("#dummy_div").append(my_dialog);

我可能缺少一些 HTML 基础知识，我将不胜感激。谢谢。

4

3 回答 3

2

您正在尝试在呈现 HTML 之前创建元素。

用这个：

 $(function() {
   $("#dummy_div").append(open_button);
   $("#dummy_div").append(my_dialog);

   $( "#dialog" ).dialog({ autoOpen: false });
   $( "#opener" ).click(function() {
     $( "#dialog" ).dialog( "open" );
   });
 });

祝你好运

笔记

$(function() { ... }); is the same thing as $(document).ready()

在此处阅读有关 document.ready() 的信息

阅读该内容以获取有关 DOM 就绪的更多信息。

于 2013-04-24T20:02:14.343 回答
1

JavaScript 在页面中遇到时会立即执行。<body>所以在你的第二种情况下，你试图在浏览器创建元素之前写入元素。因此为什么它是空的。

将脚本包装在一个window.load()或一个$(document).ready()函数中，您应该一切正常。这将使 JavaScript 等到整个 DOM 都被渲染后，然后再尝试执行您的操作。

于 2013-04-24T20:04:32.393 回答
1

这是您在 jsfiddle 上的代码。这是工作

http://jsfiddle.net/abdennour/795Yp/

如果要将其嵌入网页中，则应在以下函数中调用它：

$(function(){


})

所以 ：

$(function(){
   // Create button
var open_button = document.createElement("button");
open_button.appendChild(document.createTextNode("Open the dialog"));
open_button.setAttribute("id", "opener");

document.body.appendChild(open_button);


// Creating dialog
var my_dialog = document.createElement("div");
my_dialog.setAttribute("title", "Dialog");
my_dialog.setAttribute("id", "dialog");

document.body.appendChild(my_dialog);

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});

})
于 2013-04-24T20:34:14.437 回答