Làm cách nào để liên kết Sự kiện trên Nội dung được tải Ajax?

Tôi có một liên kết, myLinkcó thể chèn nội dung được tải bằng AJAX vào một div(phụ kiện) của trang HTML của tôi. Vấn đề là clicksự kiện mà tôi đã ràng buộc với jQuery không được thực thi trên nội dung mới được tải được chèn vào appendContainer. Sự clickkiện được ràng buộc trên các phần tử DOM không được tải bằng hàm AJAX của tôi.

Tôi phải thay đổi điều gì để sự kiện sẽ bị ràng buộc?

HTML của tôi:

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

JavaScript của tôi:

$(".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!");});

Nội dung được tải:

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

Sử dụng ủy quyền sự kiện cho các phần tử được tạo động:

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

Điều này thực sự hoạt động, đây là một ví dụ mà tôi đã thêm một liên kết với lớp .mylinkthay vì data- http://jsfiddle.net/EFjzG/

Nếu nội dung được thêm vào sau khi .on () được gọi, bạn sẽ cần tạo sự kiện được ủy quyền trên phần tử mẹ của nội dung đã tải. Điều này là do trình xử lý sự kiện bị ràng buộc khi .on () được gọi (tức là thường khi tải trang). Nếu phần tử không tồn tại khi .on () được gọi, thì sự kiện sẽ không bị ràng buộc với nó!

Vì các sự kiện lan truyền thông qua DOM, chúng tôi có thể giải quyết vấn đề này bằng cách tạo một sự kiện được ủy quyền trên một phần tử mẹ ( .parent-elementtrong ví dụ bên dưới) mà chúng tôi biết là tồn tại khi trang tải. Đây là cách thực hiện:

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

Một số bài đọc thêm về chủ đề này:

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

nếu câu hỏi của bạn là "cách liên kết các sự kiện trên nội dung được tải ajax", bạn có thể làm như sau:

$("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');
});

vì vậy bạn không cần đặt cấu hình của mình cho mọi mã ajax của bạn

Kể từ jQuery 1.7, .live()phương thức này không được dùng nữa. Sử dụng .on()để đính kèm các trình xử lý sự kiện.

Thí dụ -

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

Đối với những người vẫn đang tìm kiếm giải pháp, cách tốt nhất để làm điều đó là liên kết sự kiện trên chính tài liệu và không ràng buộc với sự kiện "sẵn sàng" Ví dụ:

$(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
        }
    });
});

});

Nếu phản hồi ajax của bạn chứa các đầu vào biểu mẫu html chẳng hạn, thì điều này sẽ rất tuyệt:

$(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);
}

});

sử dụng jQuery.live () để thay thế. Tài liệu tại đây

ví dụ

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

Đối với ASP.NET, hãy thử điều này:

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

Điều này dường như hoạt động khi tải trang và tải bảng cập nhật

Vui lòng tìm toàn bộ cuộc thảo luận ở đây .