JQuery에서 동적으로 생성된 요소의 값은 어떻게 가져옵니까?
4920 단어 ajax 학습
나는 jquery 동적으로 리 탭을 만든 후에 항상 그의 id나class를 얻을 수 없다. 코드는 다음과 같다
$("ul").append("이름");
그리고 통과
$(".name").click (function () {alert ("append 얻은 노드");}
불행히도 이렇게 얻을 수는 없어요.
올바른 방법:
$(“.name").live("click", function() {
alert ("가져왔습니다"); });
ps:jquery에서 append 이후의 노드를 얻으려면live 방법을 사용해야 합니다
jquery 소개:
반환값: jQuerylive(type, [data], fn)
개술
jQuery는 일치하는 모든 요소에 이벤트 처리 함수를 추가합니다. 이 요소는 나중에 추가해도 유효합니다.
이 방법은 기본적으로 그렇다.bind () 방법의 변체사용하다.bind () 시 선택기가 일치하는 요소는 이벤트 처리 함수를 추가하고, 이후에 추가된 요소는 없습니다.이를 위해 한 번 더 사용해야 한다.bind()여야 합니다.예컨대
Click here
이 요소에 간단한 클릭 이벤트를 연결할 수 있습니다.
$('.clickme').bind('click', function() { alert("Bound handler called."); });
요소를 클릭하면 경고 상자가 팝업됩니다.그리고 그 다음에 또 다른 원소가 첨가되었다고 상상해 보세요.
$('body').append('
Another target
');
비록 이 새로운 요소는 선택기 ".clickme"와 일치할 수 있지만, 이 요소는 호출되고 있기 때문입니다.bind () 다음에 추가되었기 때문에 이 요소를 클릭하면 아무런 효과가 없습니다.
.live()는 이러한 상황에 대응하는 방법을 제공했다.만약 우리가 이렇게 클릭 이벤트를 연결한다면:
$('.clickme').live('click', function() { alert("Live handler called."); });
그런 다음 새 요소를 추가합니다.
$('body').append('
Another target
');
그리고 새로 추가된 요소를 클릭하면 이벤트 처리 함수를 터치할 수 있습니다.
이벤트 위임
.live () 방법은 DOM에 추가되지 않은 원소에 유효합니다. 이벤트 의뢰를 사용했기 때문입니다. 조상 원소에 연결된 이벤트 처리 함수는 후대에 터치된 이벤트에 응답할 수 있습니다.전달하다.live () 의 이벤트 처리 함수는 요소에 귀속되지 않고, 그를 특수한 이벤트 처리 함수로 DOM 트리의 루트 노드에 귀속시킵니다.우리의 예에서 새로운 요소를 클릭하면 다음 절차가 순차적으로 발생합니다.
클릭 이벤트 생성
처리하다
이벤트 처리 함수가 직접 연결되어 있지 않기 때문에 이벤트가 DOM 트리의 루트 노드까지 끊임없이 거품을 일으키며 기본적으로 이 특수한 이벤트 처리 함수를 연결합니다.
수행 사유.live () 연결된 특수한 클릭 이벤트 처리 함수입니다.
이 이벤트 처리 함수는 우선 이벤트 대상의 target을 검사해서 계속해야 하는지 확인합니다.이 테스트는 $(event.target) 테스트를 통과했습니다.closest ('.clickme ') 에서 일치하는 요소를 찾을 수 있습니까?
일치하는 요소를 찾으면 원시 이벤트 처리 함수를 호출합니다.
이벤트가 발생할 때만 위의 다섯 번째 단계에서 테스트를 하기 때문에 언제든지 추가된 요소가 이 이벤트에 응답할 수 있습니다.
추가 설명
.live()는 유용하지만 특수한 실현 방식 때문에 어떤 상황에서도 간단하게 바꿀 수 없습니다.bind().주요 차이점은 다음과 같습니다.
jQuery 1.4에서live() 메서드는 사용자 정의 이벤트를 지원하고 모든 JavaScript 이벤트를 지원합니다.jQuery 1.4.1에서는 포커스와 블루 이벤트까지 지원합니다.또한 jQuery 1.4.1에서도 hover("mouseenter mouseleave"에 비추기)를 지원합니다.하지만 jQuery 1.3.x에서 지원하는 자바스크립트 이벤트와 사용자 정의 이벤트만 지원합니다: 클릭,dblclick,keydown,keypress,keyup,mousedown,mousemove,mouseout,mouseover,mouseup.
.live()는 DOM 스트리밍을 통해 찾은 요소를 완전히 지원하지 않습니다.대신 항상 선택기 뒤에서 직접 사용해야 한다.live () 방법은 앞에서 언급한 바와 같다.
이벤트 처리 함수로 사용합니다.live () 귀속 후 다른 이벤트 처리 함수를 실행하지 않으려면 이 함수는false로 되돌아와야 합니다.단지 호출하다.stopPropagation () 은 이 목적을 실현할 수 없습니다.
참조bind () 방법은 이벤트에 대한 더 많은 정보를 얻을 수 있습니다.
jQuery 1.4.1에서live () 는 여러 개의 이벤트를 받아들일 수 있으며, 공간으로 이벤트를 구분하여 유사하게 제공합니다.bind ()의 기능입니다.예를 들어, "live"는 mouseover와 mouseout 이벤트를 동시에 연결할 수 있습니다.
$('.hoverme').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { // do something on mouseover } else { // do something on mouseout } });
jQuery 1.4.3에서: 이벤트 형식의 문자열과 함수의 데이터 매핑을 연결해서 실행할 수 있습니다
$("a").live({ click: function() { // do something on click }, mouseover: function() { // do something on mouseover } });
jQuery 1.4에서 데이터 매개 변수는 이벤트 처리 함수에 추가 정보를 전달하는 데 사용할 수 있습니다.아주 좋은 용도는 폐쇄로 인한 문제에 대처하는 것이다.참고할 수 있어요.bind () 의 토론을 통해 더 많은 정보를 얻을 수 있습니다.
jQuery 1.4에서 라이브 이벤트는 기본 문서의 루트가 아닌'context'DOM 요소에 연결됩니다.이 배경을 설정하려면, jQuery 집합이나 선택기가 아닌 단일한 DOM 요소를 통해 jQuery () function's second argument를 사용합니다.
$('div.clickme', $('#container')[0]).live('click', function() { // Live handler called. });
매개 변수
type,[fn]String,FunctionV1.3
type: 한 개 이상의 이벤트 형식으로 빈칸으로 여러 이벤트를 구분합니다.
fn: 일치하는 모든 요소의 이벤트에서 귀속되는 이벤트 처리 함수
type,[data],falseString,Array,boolV1.4
type: 한 개 이상의 이벤트 형식으로 빈칸으로 여러 이벤트를 구분합니다.
데이터: 이벤트 처리 함수에 전달되는 추가 매개 변수
false:false로 설정하면 기본 동작이 효력을 상실합니다.
eventStringV1.4.3
하나 이상의 이벤트 형식의 문자열과 함수의 데이터 매핑으로 그들을 실행합니다
예제
설명:
클릭으로 생성된 p는 여전히 같은 기능을 가지고 있다.
HTML 코드:
Click me!
jQuery 코드:
$("p").live("click", function(){ $(this).after("
Another paragraph!
"); });
설명:
기본 이벤트 행위와 이벤트 거품을 막고false로 되돌아오기
jQuery 코드:
$("a").live("click", function() { return false; });
설명:
기본 이벤트 비헤이비어만 차단
jQuery 코드:
$("a").live("click", function(event){ event.preventDefault(); });