jquery和HTML布局

我想玩jQuery UI，尤其是对话框。首先，我尝试了示例代码，它工作正常：jquery和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> 

</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”。这是为什么？

但是即使我创建dummmy DOM体内：

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

......然后，在脚本中，添加两个按钮，在对话框到它，而不是身体的它仍然无法正常工作。

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

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

来源

2013-04-24 jazzblue

您正试图在呈现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()

Read about document.ready() here

阅读有关DOM准备的更多信息。

来源

2013-04-24 20:02:14

一件事 - 你有您的Javascript控制台中有任何错误？您可能会丢失一些资产，或者是通过未完成的加载或错误的网址 – 2013-04-24 20:04:48

我确实有一些警告。谢谢。 – jazzblue 2013-04-24 20:48:49

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

将脚本包装在window.load()或$(document).ready()函数中，并且应该让所有内容都能正常工作。这会让JavaScript等到整个DOM已经呈现，然后再尝试做你的东西。

来源

2013-04-24 20:04:32 Schleis

这是你在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-24 20:34:14

jquery和HTML布局

回答

相关问题