동적 html 로드 후 클릭 이벤트를 추가하기 위한 jQuery .live() vs .on() 메서드

동적 html 로드 후 클릭 이벤트를 추가하기 위한 jQuery .live() vs .on() 메서드

.live() 메서드가 권장되지 않는 jQuery v.1.7.1을 사용하고 있습니다.

html을 요소에 동적으로 로드할 때 발생하는 문제는 다음과 같습니다.

$('#parent').load("http://..."); 

나중에 클릭 이벤트를 추가하려고 해도 다음 중 하나의 방법으로 이벤트가 등록되지 않습니다.

$('#parent').click(function() ...); 

또는

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...); 

이 기능을 실현하는 올바른 방법은 무엇입니까?이 메서드는 .live()에서만 사용할 수 있는 것 같습니다만, 이 메서드는 사용하지 않는 것이 좋습니다.#child는 동적으로 로드된 요소입니다.

감사합니다.

클릭 핸들러가 동적으로 로드되는 요소에 대해 기능하도록 하려면 이벤트핸들러를 부모 오브젝트(동적으로 로드되지 않음)에 설정하고 다음과 같이 다이내믹오브젝트와 일치하는 셀렉터를 지정합니다.

$('#parent').on("click", "#child", function() {});

는 이벤트 핸들러에 됩니다.#parent 및 할 때마다 하며, 하게 됩니다.#child클릭 핸들러가 기동합니다.이를 위임된 이벤트 처리라고 합니다(이벤트 처리는 부모 개체에 위임됩니다).

에 붙일 수 때문입니다.#parent#child아직 하지 않지만 가 되어 버블 상태가 .#parent 이 이 오브젝트가 을 알 수 있습니다.#child.#child이벤트를 진행하도록 하겠습니다.

이것을 시험해 보세요.

$('#parent').on('click', '#child', function() {
    // Code
});

매뉴얼에서 다음 항목을 참조하십시오.

는 현재 핸들러는, 가 「」에 에, .이러한 핸들러는 코드 호출 시 페이지에 존재해야 합니다..on().

당신의 당신의.#child언제호출할때요소가 존재하지 않습니다라고 부르는 원소 존재하지 않는다.$.on()그것은, 그래서 행사하기 위해 않도록(과는 달리(A달리)이벤트가 구속되지 의무가 없다.$.live()).#parent단, 이 존재하기 때문에 이벤트를 거기에 바인드해도 괜찮습니다.

내 코드에서 흔히'만 발생할 것으로 행위 위의 두번째 주장은 행사 내 코드의 두 번째 인수는 이벤트가 다음까지 버블업되었을 경우에만 트리거하는 '필터의역할을 합니다 위의까지 끓어 넘쳤어요.#parent부터에서#child..

$(document).on('click', '.selector', function() { /* do stuff */ });

편집: 이 기능의 구조에 대해 좀 더 자세히 설명하겠습니다.왜냐하면...이 예에서는 전체 문서에 청취자를 배치합니다.

언제 언제click어떤 element(s)일치에 일치하는 요소에 따라.selector이 행사는 주요 문서에 너무 오래는 이벤트는메인 문서까지 올라갑니다라고 부른다 다른 청취자들 있은 곳.다른 청취자가 전화를 걸지 않는 한event.stopPropagation()법, 사건의 부모 구성 요소에 대한 펄펄 끓는 자리를 차지할 것이다.

특정 요소 또는 요소 세트에 바인딩하는 대신 지정된 셀렉터와 일치하는 요소에서 발생하는 이벤트를 수신합니다.즉, 동적으로 추가된 요소뿐만 아니라 현재 기존 요소와 자동으로 일치하는 청취자를 한 번에 1개 작성할 수 있습니다.

퍼포먼스나 메모리 사용률(대규모 애플리케이션) 등, 몇개의 이유로 스마트하게 동작합니다.

편집:

분명히, 여러분들에 귀 기울일 수 있는 가장 가까운 부모 요소가 되었고, 너를 대신해서 요소를 사용할 수 있는 게 낫다.document는 한 아이들 그 부모 요소 내에 있는에 대한 이벤트를 모니터링하려면...하지만 그것이 정말 어떤 것이 질문과 어떤 관련도 없다.

1.7의 .live()에 상당하는 것은 다음과 같습니다.

$(document).on('click', '#child', function() ...); 

기본적으로 클릭 이벤트를 확인하고 #child에 대해 필터링합니다.

답변이 늦었다는 것을 알지만, .live() 메서드용 polyfill을 작성했습니다.jQuery 1.11에서 테스트해 봤는데 잘 작동하는 것 같아요.가능한 한 .on() 메서드를 구현해야 한다는 것은 알고 있습니다만, 어떤 이유로든 모든 .live() 콜을 동등한 .on() 콜로 변환할 수 없는 대규모 프로젝트에서는 다음과 같은 작업이 가능합니다.

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

jQuery를 로드한 후 live()를 호출하기 전에만 포함합니다.

.on()은 jQuery 버전 1.7 이후용입니다.이전 버전을 사용하는 경우 다음을 사용합니다.

$("#SomeId").live("click",function(){
    //do stuff;
});

저는 프로젝트에서 'live'를 사용했는데, 제 친구 중 한 명이 'live' 대신 'on'을 사용하라고 제안했어요.그리고 내가 그것을 사용하려고 했을 때 나는 너처럼 문제를 경험했다.

내 페이지에서는 버튼 테이블 행과 많은 돔을 동적으로 만듭니다만, 사용했을 때는 마법이 사라졌습니다.

아이처럼 사용하는 다른 솔루션은 클릭할 때마다 기능을 호출합니다.하지만 다시 그렇게 만들 방법을 찾았고, 여기 해결책이 있습니다.

코드를 다음과 같이 적습니다.

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

다음과 같은 페이지에서 객체를 작성한 후 caller()를 호출합니다.

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

이렇게 하면 페이지를 클릭할 때마다 기능을 호출할 수 없습니다.

언급URL : https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht