[javascript] Ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법은 무엇입니까?

Program / 글쓴이

내 HTML 페이지의 (appendedContainer)에 myLinkAJAX로드 콘텐츠를 삽입해야하는 링크 가 있습니다 div. 문제는 click내가 jQuery로 바인딩 한 이벤트가 appendedContainer에 삽입 된 새로로드 된 콘텐츠에서 실행되지 않는다는 것입니다. click이벤트는 내 AJAX 기능이로드되지 않습니다 DOM 요소에 바인딩됩니다.

이벤트가 바인딩되도록 변경해야하는 것은 무엇입니까?

내 HTML :

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

내 JavaScript :

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

로드 할 콘텐츠 :

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

답변

동적으로 생성 된 요소에 이벤트 위임을 사용합니다.

$(document).on("click", '.mylink', function(event) {
    alert("new link clicked!");
});

이것은 실제로 여기에 내가 클래스와 앵커 추가 예제가 작동 않는 .mylink대신 data– http://jsfiddle.net/EFjzG/가

답변

.on ()이 호출 된 후 콘텐츠가 추가되면로드 된 콘텐츠의 부모 요소에 위임 된 이벤트를 만들어야합니다. .on ()이 호출 될 때 (즉, 일반적으로 페이지로드시) 이벤트 핸들러가 바인딩되기 때문입니다. .on ()이 호출 될 때 요소가 존재하지 않으면 이벤트가 바인딩되지 않습니다!

이벤트는 DOM을 통해 전파되기 때문에 .parent-element페이지가로드 될 때 존재하는 것으로 알고 있는 상위 요소 ( 아래 예에서) 에 위임 된 이벤트를 생성하여이를 해결할 수 있습니다 . 방법은 다음과 같습니다.

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

주제에 대한 추가 정보 :

답변

귀하의 질문이 “어떻게 ajax로드 된 콘텐츠에 이벤트를 바인딩하는 방법”이라면 다음과 같이 할 수 있습니다.

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

따라서 모든 ajax 코드에 구성을 배치 할 필요가 없습니다.

답변

jQuery 1.7부터이 .live()메서드는 더 이상 사용되지 않습니다. .on()이벤트 핸들러를 연결하는 데 사용 합니다.

예 – 

$( document ).on( events, selector, data, handler );

답변

여전히 해결책을 찾고있는 사람들에게 가장 좋은 방법은 문서 자체에 이벤트를 바인딩하고 “on ready”이벤트와 바인딩하지 않는 것입니다. 예 : 

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

});

답변

예를 들어 ajax 응답에 html 양식 입력이 포함되어 있다면 이것이 좋을 것입니다.

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) {
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});

답변

대신 jQuery.live ()를 사용하십시오. 여기에 문서화

예 : 

$("mylink").live("click", function(event) { alert("new link clicked!");});