Skip to content

Instantly share code, notes, and snippets.

@riix

riix/ajax.수정전.html

Created July 25, 2012 09:16
Show Gist options
  • Save riix/3175234 to your computer and use it in GitHub Desktop.
Save riix/3175234 to your computer and use it in GitHub Desktop.
Download ZIP
Ajax Script 핸들링 정리
Raw
ajax.수정전.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Document</title>
<style type="text/css">
<!--
div.popup { border: solid 10px #ff0000; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
<!-- //
$(function(){
$('#popupWrapper').load('ajax_child.html?rand='+Math.random()+' div.popup', function(){
alert('부모가 자식을 불러온 다음 실행 - 작동 됨');
});
});
// -->
</script>
</head>
<body>
<div id="popupWrapper" class="popupWrap">
로더
</div>
<p>
삽입된 script 위치
<ol>
<li>ajax_child.html header 안 - 작동 안됨</li>
<li>ajax_child.html div.pop 안 - 작동 안됨</li>
<li>ajax_child.html body 안 - 작동 안됨</li>
</ol>
<p>
답변
</p>
<ol>
<li>첨부한 ajax.html 내용 대로 function 안에 관련 장치를 삽입</li>
</ol>
</body>
</html>
Raw
ajax.수정후.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Document</title>
<style type="text/css">
<!--
div.popup { border: solid 10px #ff0000; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
<!-- //
$(function(){
$('button.test-live').live('click',function(){
alert('function 안에서 live 로 바인딩된 클릭');
});
$('#popupWrapper').load('ajax_child.html?rand='+Math.random()+' div.popup', function(){
alert('부모가 자식을 불러온 다음 실행 - 작동 됨');
$('button.test-function').live('click',function(){
alert('function 안에서 생성된 클릭');
});
// defer.js 실행
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "defer.js";
$("#popupWrapper").append(s);
});
});
// -->
</script>
</head>
<body>
<div id="popupWrapper" class="popupWrap"><!-- load 된 Dom 객체가 들어갈 부분 -->
로더
</div><!-- // load 된 Dom 객체 -->
<p>
삽입된 script 위치
<ol>
<li>$('#popupWrapper').load(url, function(){ } 안 - 작동 됨</li>
<li>$('#popupWrapper').load(url, function(){ } 안 defer.js 호출 - 작동 됨</li>
<li>ajax_child.html header 안 - 작동 안됨</li>
<li>ajax_child.html div.pop 안 - 작동 안됨</li>
<li>ajax_child.html body 안 - 작동 안됨</li>
</ol>
<p>
답변
</p>
<ol>
<li>첨부한 ajax.html 내용 대로 function 안에 관련 장치를 삽입</li>
</ol>
</body>
</html>
Raw
ajax_child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
alert('팝업 상단 header 안에서 실행 - 작동되지 않음');
$('button.test-children').live('click',function(){
alert('테스트 버튼 클릭!');
});
-->
</script>
<title>Document</title>
</head>
<body>
<div id="popup" class="popup">
팝업내용
<script type="text/javascript">
<!--
alert('팝업 내부 div.popup 안에서 실행 - 작동되지 않음');
$('button.test-children').live('click',function(){
alert('테스트 버튼 클릭!');
});
-->
</script>
<button class="test-function">popup function 밖에서 live로 바인딩된 클릭</button>
<button class="test-function">popup function 안에서 생성된 클릭</button>
<button class="test-defer">defer.js에서 생성된 클릭</button>
<button class="test-children">자식에게서 생성된 클릭</button>
</div>
<script type="text/javascript">
<!--
alert('팝업 하단 body 안에서 실행 - 작동되지 않음');
$('button.test-children').live('click',function(){
alert('테스트 버튼 클릭!');
});
-->
</script>
</body>
</html>
Raw
defer.js
$('body').css('border','solid 10px #000').append('<p>defer.js 실행 - 작동됨</p>');
$('button.test-defer').live('click',function(){
alert('부모에게서 생성된 클릭');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment