Как связать события с загруженным содержимым Ajax?

У меня есть ссылка, myLink, которая должна вставлять содержимое, загруженное AJAX, в div (appendedContainer) моей HTML-страницы. Проблема в том, что событие click, которое я связал с jQuery, не выполняется на вновь загруженном содержимом, которое вставлено в appendedContainer. Событие click связано с элементами DOM, которые не загружаются с моей функцией AJAX.

Что мне нужно изменить, чтобы событие было связано?

Мой 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>

Ответы

Ответ 1

Использование делегирования событий для динамически создаваемых элементов:

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

Это действительно работает, вот пример, где я добавил якорь с классом .mylink вместо data - http://jsfiddle.net/EFjzG/

Ответ 2

Если содержимое добавляется после вызова функции .on(), вам необходимо создать делегированное событие в родительском элементе загруженного содержимого. Это связано с тем, что обработчики событий связаны, когда вызывается .on() (т.е. Обычно при загрузке страницы). Если элемент не существует при вызове метода .on(), событие не будет привязано к нему!

Поскольку события распространяются через DOM, мы можем решить это, создав делегированное событие в родительском элементе (.parent-element в приведенном ниже примере), который, как мы знаем, существует, когда страница загружается. Вот как:

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

Более подробные сведения по теме:

Ответ 3

если ваш вопрос: "Как связать события с загруженным контентом 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-кода

Ответ 4

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий.

Пример -

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

Ответ 5

используйте jQuery.live(). Документация здесь

e.g

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

Ответ 6

Для ASP.NET попробуйте следующее:

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

Это похоже на работу с загрузкой страницы и загрузкой панели обновления

Пожалуйста, найдите полное обсуждение здесь.

Ответ 7

Для тех, кто все еще ищет решение, лучший способ сделать это - связать событие с самим документом и не связывать его с событием "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
        }
    });
});

});