Ajax 로딩된 콘텐츠에서 이벤트를 바인드하는 방법

Ajax 로딩된 콘텐츠에서 이벤트를 바인드하는 방법

난 연결고리가 있어myLink에 AJAX 로딩된 콘텐츠를 삽입합니다.div(appended Container)를 선택합니다.문제는 이 시스템이clickjQuery로 바인드한 이벤트가 added Container에 삽입된 새로 로드된 콘텐츠에서 실행되지 않습니다.그click이벤트는 내 AJAX 함수로 로드되지 않은 DOM 요소에 바인딩됩니다.

이벤트를 바인딩하려면 무엇을 변경해야 합니까?

내 HTML:

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

My 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!");
})

그 주제에 대한 더 많은 읽을거리:

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

질문이 "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
        }
    });
});

});

예를 들어 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!");});

ASP의 경우.넷 테스트:

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

이 기능은 페이지 로드 및 업데이트 패널 로드 시 작동합니다.

자세한 내용은 이쪽에서 확인하시기 바랍니다.

Ajax 콘텐츠 로드 시 이벤트 바인딩에 중요한 단계...

01. 우선 셀렉터에서 이벤트를 언바인드 또는 오프합니다.

$(".SELECTOR").off();

02. 문서 수준에서 이벤트 청취자 추가

$(document).on("EVENT", '.SELECTOR', function(event) { 
    console.log("Selector event occurred");
});

다음은 제가 선호하는 방법입니다.

// bind button click to function after button is AJAX loaded
$('#my_button_id').bind('click', function() {
    my_function(this);
});

function my_function () {
    // do stuff here on click
}

이 코드는 AJAX 콜이 완료된 직후에 설정합니다.

JS 뉴브로서 명확하지 않은 한 가지 포인트를 추가하고 싶습니다.일반적으로 다음과 같은 이벤트가 문서 내에서 전송됩니다.

$(function() {
    $("#entcont_table tr td").click(function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});
}

원하는 이벤트 위임 사용:

$(function() {
    // other events
}

$("#entcont_table").on("click","tr td", function (event) {
    var pk = $(this).closest("tr").children("td").first().text();
    update_contracts_details(pk);
});

준비된 문서 내에서 이벤트 위임을 수행할 경우 다음과 같은 오류가 발생합니다.

cant assign guid on th not an boject

언급URL : https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content