제이쿼리 기초질문입니다. -.-;;; 채택완료
</p>
<p>$(function(){</p>
<p> </p>
<p>$('body').append("<div class='modal'><div class='cad'></div></div>");</p>
<p>
$('.popUp').on('click',function(){
$('.modal').fadeIn('normal');
$('.cad').html("<img src='popup/57.gif'><img src='img/close.png'>");
});</p>
<p>
$('.cad').on('click',function(){
$('.modal').fadeOut('normal');</p>
<p> </p>
<p>});</p>
<p>
위 소스가 있습니다.
다름아니라 .popUp 버튼을 클릭하면 그냥 모달레이어 하나 띄우는 것입니다.
위 소스를 보시면 아시다시피,
html 내부에다가
를 삽입하지 않고,
append 를 이용해서 body에 일단 먼저 넣었습니다.
모달레이어는
이 안에다가
즉,
html()을 이용해서 
넣었습니다.
이렇게 하면, .popUp 을 클릭하면 잘 나옵니다..
문제는 닫을 때입니다.
.modal 안에 있는 .cad 레이어를 클릭하면 닫힙니다.
그런데,
.cad안에 있는 두번째 이미지인 
를 클릭해서 닫히게 하려고,,
$('.cad img:last').on('click',function(){
....
또는
$('.cad img:last-child').on('click',function(){
...
이렇게 바꾸면 안닫힙니다.
심지어,
$('.cad img').on('click',function(){
....
이렇게 해봐도 안 다칩니다.
곰곰히 고찰해보니,,,
제이퀘리에서 실시간으로 '생성된' 요소를
클릭가능이라든지,,암튼, 이럴 경우 live() 같은 명령어를 사용하는 기억이 납니다.
(비록, 지금은 live() 명령어는 사라졌지만.)
그래서,
.cad 안에 html() 명령어로 이것을
넣었는데,,이것은 화면에 나타나긴 하지만, 마우스 클릭과 같은 이벤트는
받아들여서 작동은 될 수가 없는,,,뭔가 유령과 같은 존재라선지,,,,,음..
헷갈리네요..
이 원인을 파악하실 능력이 있는 고수님 계시는지요? -.-;;;;
답변 2개
$(document).on("click",".cad",function(){</p>
<p> $('.modal').fadeOut('normal');</p>
<p>});
동적으로 생성된 구조(append appendTo 등..)는 document를 대상으로 이벤트를 걸어야합니다.
댓글을 작성하려면 로그인이 필요합니다.
크~
감사드립니다.
첨에 댓글 수정전에 알려주신데로
$(document).on('cad','click',function(){ 이렇게 해봐도 안되어서 다시 질문 올리려던 참에,, 다시 보니,, 댓글을 수정해주셨군요..
그래서, 그렇게 해보니,,,정말 완벽히 잘 돌아갑니다..
아. 그리고, 동적으로 생성된 것은 document를 대상으로 해야하는 것이군요...
가물가물하게 그런 개념이 들어지긴 했는데,,,
댓글 덕분에 뚜렷해졌습니다. ^^
아주 깊은 감사드립니다. ^^
속이 시원해졌습니다.
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인