2013-04-24 3 views
0

특히 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 기본이 누락되어있는 것으로 알고 있습니다. 감사합니다. .

답변

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() 

Read about document.ready() here

준비가 DOM에 대한 자세한 내용은이 읽기.

+0

한 가지 - 당신이 할 자바 스크립트 콘솔에 오류가 있습니까? 미완성 된로드 또는 잘못된 URL을 통해 자산이 누락되었을 수 있습니다. –

+0

실제로 몇 가지 경고가 있습니다. 감사. – jazzblue

1

JavaScript가 페이지에서 발생하면 즉시 실행됩니다. 두 번째 경우에는 브라우저가 정보를 작성하기 전에 <body> 요소에 쓰려고합니다. 따라서 그것이 null 인 이유.

window.load() 또는 $(document).ready() 함수로 스크립트를 감싸면 모든 것이 작동해야합니다. 물건을 사용하기 전에 DOM 전체가 렌더링 될 때까지 JavaScript가 대기합니다.

1

이것은 jsfiddle의 코드입니다. 그래서

$(function(){ 


}) 

: 당신이 웹 페이지에 임베디드 원하는 다음 함수를 호출해야하는 경우 작동

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

$(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"); 
}); 

})