[javascript] 동적 HTML을로드 한 후 클릭 이벤트를 추가하기위한 jQuery .live () 및 .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객체에 첨부되며 click 이벤트가 시작된 객체로 버블 링 #child될 때마다 클릭 핸들러가 시작됩니다. 이것을 위임 된 이벤트 처리라고합니다 (이벤트 처리는 부모 개체에 위임됩니다).

당신이에 이벤트를 첨부 할 수 있기 때문에이 방법을 끝낼 #parent짝수 때 개체 #child개체가 아직 존재하지 않지만, 나중에 존재하고 클릭 도착 때까지 클릭 이벤트 의지 거품까지 #parent개체가, 그것에서 유래 것을 볼 수 #child와 클릭 한 번으로 이벤트를 처리하는 이벤트 핸들러가 #child있습니다.

답변

이 시도:

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

로부터 $.on()문서 :

이벤트 핸들러는 현재 선택된 요소에만 바인딩됩니다. 코드가 호출 할 때 페이지에 존재해야합니다 .on().

귀하의 #child전화 할 때 요소는 존재하지 않는 $.on()이벤트가 (달리 구속되지 않도록, 그것에 $.live()). #parent그러나 이벤트 가 존재하므로 이벤트를 바인딩하는 것이 좋습니다.

위 코드에서 두 번째 인수는 이벤트가 #parentfrom에서 버블 링 된 경우에만 트리거하는 ‘필터’역할을합니다 #child.

답변

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

편집 : 나는 이것이 작동하는 방법에 대해 조금 더 많은 정보를 제공하고 있습니다. 왜냐하면 단어 때문입니다. 이 예제에서는 전체 문서에 리스너를 배치합니다.

이 때 click어떤 요소 (들) 일치에 .selector, 이벤트가 주 문서까지 거품 – 너무 오래 다른 청취자가 없습니다로 그 호출 event.stopPropagation()방법 – 부모 요소에 이벤트의 버블 맨 것이다.

특정 요소 또는 요소 집합에 바인딩하는 대신 지정된 선택기와 일치하는 요소에서 오는 이벤트를 수신하고 있습니다. 즉, 현재 존재하는 요소와 동적으로 추가 된 요소를 자동으로 일치시키는 리스너를 한 번에 하나씩 만들 수 있습니다.

성능 및 메모리 사용률 (대규모 응용 프로그램)을 포함하여 몇 가지 이유로 현명합니다.

편집하다:

분명히, 당신 이들을 수있는 가장 가까운 부모 요소가 더 좋으며, 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’를 사용했지만 친구 중 한 명이 라이브 대신 ‘on’을 사용해야한다고 제안했습니다. 그리고 내가 그것을 사용하려고했을 때 나는 당신처럼 문제가 발생했습니다.

내 페이지에서 버튼 테이블 행과 많은 DOM 항목을 동적으로 만듭니다. 하지만 마법을 사용할 때 사라졌습니다.

어린 아이처럼 사용하는 것과 같은 다른 솔루션은 매번 클릭 할 때마다 함수를 호출합니다. 그러나 나는 다시 일어날 수있는 방법을 찾고 여기에 해결책이 있습니다.

다음과 같이 코드를 작성하십시오.

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

발신자 호출 (); 이처럼 페이지에서 객체를 만든 후

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

이렇게하면 페이지를 클릭 할 때마다 함수가 호출되지 않습니다.