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

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

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

Для тех, кто все еще ищет решение, лучший способ сделать это - привязать событие к самому документу, а не связывать его с событием «готово». Например:

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

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

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

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

Вы можете найти полное обсуждение здесь .