안녕하세요?
다름이 아니오라,
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개
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 태그가 정의 되어 있다고 가정했을때 입니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12487 |
PHP
pc 모바일 체크
|
| 12486 |
PHP
계정 사용량(용량) 확인
|
| 380 | |
| 12484 | |
| 12483 |
MySQL
소수점 반올림 버림
|
| 376 | |
| 12482 | |
| 12481 |
PHP
에러 로그파일 생성하기
|
| 12479 | |
| 12478 | |
| 12477 |
PHP
후이즈검색 하기 입니다.
|
| 12476 |
PHP
그래프 그리기 입니다.
|
| 12475 |
JavaScript
자바스크립트로 구현한 number_format() 입니다.
|
| 12474 |
JavaScript
금액 관련 숫자를 한글로 변환하기 입니다.
|
| 12473 |
PHP
PHP 날짜 계산 관련 함수
|
| 12472 |
jQuery
jQuery 1.x와 2.x 버전 동시에 사용하기
|
| 12471 | |
| 12470 | |
| 12469 |
JavaScript
사업자 등록번호 검사하기 입니다.
|
| 371 | |
| 12468 | |
| 12467 |
JavaScript
항상 같은곳에 광고창 만들기 입니다.
|
| 12466 |
JavaScript
부메뉴 나오게 하기 입니다.
|
| 12465 |
JavaScript
특정문자 제거하기 입니다.
|
| 12464 |
JavaScript
휴대폰번호 검사 하기 입니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기