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佈局

回答

相關問題