r

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 페이지에서 인식시키는 방법을 알려주세요 ㅠ.ㅠ

|

댓글 11개

<div id=abc>
</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가 동작합니다.
댓글 달아주신 두분 감사합니다. 꾸벅!!

그런데 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');
}
});
위와같은 코드로 여러가지 이벤트를 바인딩 할 수도 그 이후의 개체에 대한 참조도 가능합니다.
중점은 .live() 안에서 각 이벤트에 대해 바인딩 그 이후 참조 등등 모두 가능하다는 말씀이시네요!!

정말 좋은 가르침 감사합니다!ㅠ.ㅠ !!

정말 딱 마지막 한가지만 더 여쭙겠습니다!


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 태그가 정의 되어 있다고 가정했을때 입니다.
감사합니다 분명 좋은 방법인것 같습니다.
post를 사용한다!
제약이 많긴 하겠지만, 의미 없는 도전은 아닌것 같습니다.
한번 시도해볼께요!
저도 아직 1.6 대에서 살고 있었네요
감사합니다 :)
제가 감사드립니다! on으로 바꿔도 괜찮네요
정확하게 파악하고 싶으시면 complete 콜백 함수를 확인하세요.

http://api.jquery.com/load/
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
12-03-13 조회 2,928
12-03-12 조회 5,508
12-03-12 조회 2,991
12-03-12 조회 3,645
12-03-12 조회 3,397
12-03-12 조회 2,968
12-03-12 조회 1만
12-03-12 조회 3,322
12-03-12 조회 3,970
12-03-12 조회 2,967
12-03-12 조회 3,297
12-03-12 조회 3,206
12-03-12 조회 4,152
12-03-12 조회 5,770
12-03-12 조회 3,756
12-03-12 조회 5,563
12-03-12 조회 3,784
12-03-12 조회 6,180
12-03-11 조회 3,685
12-03-11 조회 3,124
12-03-11 조회 4,053
12-03-11 조회 4,863
12-03-11 조회 3,752
12-03-11 조회 3,718
12-03-11 조회 5,371
12-03-10 조회 3,401
12-03-10 조회 3,002
12-03-10 조회 3,893
12-03-10 조회 3,014
12-03-09 조회 7,344
12-03-09 조회 3,091
12-03-09 조회 3,476
12-03-09 조회 3,077
12-03-09 조회 3,099
12-03-09 조회 3,301
12-03-09 조회 4,088
12-03-08 조회 3,772
12-03-08 조회 3,662
12-03-08 조회 3,934
12-03-08 조회 6,078
12-03-08 조회 2,977
12-03-08 조회 4,042
12-03-08 조회 3,928
12-03-07 조회 2,848
12-03-07 조회 3,012
12-03-07 조회 2,700
12-03-06 조회 1.1만
12-03-06 조회 3,157
12-03-06 조회 4,224
12-03-06 조회 3,770
12-03-06 조회 3,101
12-03-06 조회 2,856
12-03-06 조회 6,291
12-03-06 조회 2,955
12-03-05 조회 3,020
12-03-04 조회 4,247
12-03-03 조회 3,637
12-03-03 조회 3,751
12-03-03 조회 3,290
12-03-03 조회 3,262
12-03-02 조회 3,082
12-03-02 조회 3,382
12-03-02 조회 3,202
12-03-02 조회 4,157
12-03-02 조회 3,330
12-03-02 조회 5,070
12-03-02 조회 2,934
12-03-02 조회 4,613
12-03-01 조회 5,109
12-03-01 조회 6,456
12-03-01 조회 3,257
12-02-29 조회 3,479
12-02-29 조회 3,969
12-02-29 조회 3,588
12-02-29 조회 3,630
12-02-29 조회 5,412
12-02-28 조회 3,570
12-02-28 조회 3,388
12-02-28 조회 3,569
12-02-28 조회 3,523
12-02-28 조회 3,137
12-02-27 조회 4,359
12-02-27 조회 4,199
12-02-27 조회 3,943
12-02-27 조회 3,394
12-02-27 조회 3,222
12-02-27 조회 2,942
12-02-27 조회 4,131
12-02-27 조회 5,041
12-02-27 조회 3,765
12-02-26 조회 4,036
12-02-26 조회 3,495
12-02-26 조회 3,542
12-02-26 조회 3,694
12-02-26 조회 3,411
12-02-26 조회 3,327
12-02-26 조회 3,277
12-02-26 조회 3,627
12-02-26 조회 3,750
12-02-26 조회 3,398