jquery 에서 load()또는 ajax()로 불러온 html의 인식및 활성화질문 정보
jQuery jquery 에서 load()또는 ajax()로 불러온 html의 인식및 활성화질문
본문
안녕하세요?
다름이 아니오라,
jquery 에서 load()또는 ajax()로 불러온 html 페이지의 이벤트 활성화질문입니다.
즉, a.php 파일에서,
<div id=abc>
</div>
$('#abc').load('./def.php');
$('#zzz').click(function() {
alert("click!");
});)
이고,
def.php의 내용은
<div id='zzz'>
클릭하는곳
</div>
했을때,
zzz가 ajax로 불리어 오니, #zzz를 찾지 못합니다.
물론 이 예제에서는 소스 자체에 onclick 이벤트를 걸어주면 되긴 하지만
클릭뿐 아니라 다른 여러가지 객체나 이벤트를 활성화 시키려고 합니다.
어찌보면 아주 간단한 질문이기도 한데, 정말 찾을 수가 없습니다..
jquery책에서도 구글링에서도 명확한 답변을 검색을 하지 못했습니다.
제가 뭔가 개념이 잡히지 않은건지, 분명 많이 사용하시는 부분이라 생각되는데
알수가 없습니다;;
#zzz 를 abc.php 페이지에서 인식시키는 방법을 알려주세요 ㅠ.ㅠ
추천
1
1
댓글 11개
<div id=abc>
</div>
<script>
$('#abc').load('./def.php');
$('#zzz').live("click", function(event) {
alert("aa");
});
</script>
live 메서드를 이용해보세요. live는 로드 당시에 없던 개체에 대해서도 해당 이벤트를 사용하게끔 해주는 멋진 녀석입니다^^
새로 생기는 개체가 있는지 없는지 감시자 역할이라고 보시면 되죵~
</div>
<script>
$('#abc').load('./def.php');
$('#zzz').live("click", function(event) {
alert("aa");
});
</script>
live 메서드를 이용해보세요. live는 로드 당시에 없던 개체에 대해서도 해당 이벤트를 사용하게끔 해주는 멋진 녀석입니다^^
새로 생기는 개체가 있는지 없는지 감시자 역할이라고 보시면 되죵~
gilynh 님 말씀대로 .live('click') 으로 처리하시면 됩니다.
그리고 script를 바로 입력하시지 마시고
<script>
$(document).ready(function() {
$('#abc').load('./def.php');
$('#zzz').live("click", function(event) {
alert("aa");
});
});
</script>
이렇게 document ready 상태에서 script가 실행되게 하셔야 html이 모두 로드 된 이후에 script가 동작합니다.
그리고 script를 바로 입력하시지 마시고
<script>
$(document).ready(function() {
$('#abc').load('./def.php');
$('#zzz').live("click", function(event) {
alert("aa");
});
});
</script>
이렇게 document ready 상태에서 script가 실행되게 하셔야 html이 모두 로드 된 이후에 script가 동작합니다.
댓글 달아주신 두분 감사합니다. 꾸벅!!
그런데 1.7.1 버젼에서 권고사항에 live대신 on을 사용하라고 권고 하는 것 같더군요
어쨋든 예제까지 올려주셔서 감이 잡힙니다.
정말 감사드립니다.
그런데, click 이외에 이벤트에 대해 혹은 ajax로 불러온 직후, 별다른 사용자의 이벤트 없이 자동으로 활성화 시켜야 할경우 어떻게 해야 할까요?
#zzz 안의 모든 레이어에 대한 선택적 검색이라든가, 그안의 여러 개체나 id가 있을때
선택해서 그중에 어떤 값을 가져와야 할때 입니다.
그런데 1.7.1 버젼에서 권고사항에 live대신 on을 사용하라고 권고 하는 것 같더군요
어쨋든 예제까지 올려주셔서 감이 잡힙니다.
정말 감사드립니다.
그런데, click 이외에 이벤트에 대해 혹은 ajax로 불러온 직후, 별다른 사용자의 이벤트 없이 자동으로 활성화 시켜야 할경우 어떻게 해야 할까요?
#zzz 안의 모든 레이어에 대한 선택적 검색이라든가, 그안의 여러 개체나 id가 있을때
선택해서 그중에 어떤 값을 가져와야 할때 입니다.
오~ 정말 live 대신에 on 메서드를 쓰기를 권고하고 있군요.
밑에 질문은 이벤트 bind를 말씀하시는 건가요.
일단 live를 기준으로 다시 설명 드리자면,
$('#zzz').live({
click : function( event ){
$(this).after('<p>여기 p태그 추가염 ㅋ</p>');
},
mouseover : function( event ){
$(this).addClass('over');
},
mouseout : function( event ){
$(this).removeClass('over');
}
});
위와같은 코드로 여러가지 이벤트를 바인딩 할 수도 그 이후의 개체에 대한 참조도 가능합니다.
밑에 질문은 이벤트 bind를 말씀하시는 건가요.
일단 live를 기준으로 다시 설명 드리자면,
$('#zzz').live({
click : function( event ){
$(this).after('<p>여기 p태그 추가염 ㅋ</p>');
},
mouseover : function( event ){
$(this).addClass('over');
},
mouseout : function( event ){
$(this).removeClass('over');
}
});
위와같은 코드로 여러가지 이벤트를 바인딩 할 수도 그 이후의 개체에 대한 참조도 가능합니다.
중점은 .live() 안에서 각 이벤트에 대해 바인딩 그 이후 참조 등등 모두 가능하다는 말씀이시네요!!
정말 좋은 가르침 감사합니다!ㅠ.ㅠ !!
정말 딱 마지막 한가지만 더 여쭙겠습니다!
jquery 에서 live() 나 on() 에는 이벤트가 반드시 지정되어야 합니다.
클릭, 마우스 오버, 마우스 아웃등(이런 이벤트들)이 일어나지 않을때,
즉, ajax로 막 불러오자 마자, 그 불러온 #zzz 안의 <img> 태그에 title혹은 src 값을 가져 오려고 합니다.
그 이하 가져오는 구문은 알고 있습니다만,
문제는, ajax로 막 불러오자 마자, 즉, 클릭, 마우스 오버 등의 행동(이벤트)이 없이 #zzz 를 활성화 시키는 방법이 없을까 입니다 ㅠ.ㅠ
ajaxstop을 이용해서해봤는데 ajaxstop은 이벤트가 아니라서 live나 on에서도 쓸 수 없고,
load뒤에 붙여도 새로 가져온 html 레이어를 인식하지 못하더군요
정말 좋은 가르침 감사합니다!ㅠ.ㅠ !!
정말 딱 마지막 한가지만 더 여쭙겠습니다!
jquery 에서 live() 나 on() 에는 이벤트가 반드시 지정되어야 합니다.
클릭, 마우스 오버, 마우스 아웃등(이런 이벤트들)이 일어나지 않을때,
즉, ajax로 막 불러오자 마자, 그 불러온 #zzz 안의 <img> 태그에 title혹은 src 값을 가져 오려고 합니다.
그 이하 가져오는 구문은 알고 있습니다만,
문제는, ajax로 막 불러오자 마자, 즉, 클릭, 마우스 오버 등의 행동(이벤트)이 없이 #zzz 를 활성화 시키는 방법이 없을까 입니다 ㅠ.ㅠ
ajaxstop을 이용해서해봤는데 ajaxstop은 이벤트가 아니라서 live나 on에서도 쓸 수 없고,
load뒤에 붙여도 새로 가져온 html 레이어를 인식하지 못하더군요
분명히 live는 사용자가 어떠한 행동을 해야 합니다.
단순히 로드 되는 것만으로는 조건을 충족시킬 수 없더군요.
제가 잘 몰라서 그런 것일 수도 있습니다만,
위와 같은 live를 쓰지않고 a.php에서 def.php에 있는 #zzz 란 녀석을 스크립트로 컨트롤 하기란 쉽지 않은 일 같네요.
다음의 방법은 좀 무식합니다^^ 제약 사항도 많구요.
$.post("./def.php", function(data) {
var buf = data.split('src="');
var buf2 = buf[1].split('" title="');
var buf3 = buf2[1].split('"');
var src = buf2[0];
var title = buf3[0];
alert(src + title);
});
def.php의 내용이 일정해야합니다.
<div id='zzz'>
<img src="img/icon.gif" title="aaa" />
</div>
이런 형식으로 img 태그가 정의 되어 있다고 가정했을때 입니다.
단순히 로드 되는 것만으로는 조건을 충족시킬 수 없더군요.
제가 잘 몰라서 그런 것일 수도 있습니다만,
위와 같은 live를 쓰지않고 a.php에서 def.php에 있는 #zzz 란 녀석을 스크립트로 컨트롤 하기란 쉽지 않은 일 같네요.
다음의 방법은 좀 무식합니다^^ 제약 사항도 많구요.
$.post("./def.php", function(data) {
var buf = data.split('src="');
var buf2 = buf[1].split('" title="');
var buf3 = buf2[1].split('"');
var src = buf2[0];
var title = buf3[0];
alert(src + title);
});
def.php의 내용이 일정해야합니다.
<div id='zzz'>
<img src="img/icon.gif" title="aaa" />
</div>
이런 형식으로 img 태그가 정의 되어 있다고 가정했을때 입니다.
감사합니다 분명 좋은 방법인것 같습니다.
post를 사용한다!
제약이 많긴 하겠지만, 의미 없는 도전은 아닌것 같습니다.
한번 시도해볼께요!
post를 사용한다!
제약이 많긴 하겠지만, 의미 없는 도전은 아닌것 같습니다.
한번 시도해볼께요!
저도 아직 1.6 대에서 살고 있었네요
감사합니다 :)
감사합니다 :)
제가 감사드립니다! on으로 바꿔도 괜찮네요
.live
