Як пов’язати події на вміст, завантажений Ajax?

У мене є посилання, myLinkяке має вставити вміст, завантажений AJAX, у div(доданий контейнер) моєї HTML-сторінки. Проблема полягає в тому, що clickподія, яку я пов'язав з jQuery, не виконується на нещодавно завантаженому вмісті, який вставляється у доданийContainer. 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>

Здається, це працює при завантаженні сторінки та на завантаженні панелі оновлення

Ознайомтесь із повним обговоренням тут .