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

Question

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

1175 8

jQuery javascript html ajax jquery-events

8 ответов:

Comments

Ничего не найдено.

lifetimes · Accepted Answer · 2013-05-17 01:18:31

используйте делегирование событий для динамически создаваемых элементов:
$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});
это действительно работает, вот пример, где я добавил якорь с классом .mylink вместо data - http://jsfiddle.net/EFjzG/

Kai · Accepted Answer · 2015-07-06 04:28:39

если содержимое добавляется после .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

antoniputra · Accepted Answer · 2015-07-05 23:04:06

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

Elnaz · Accepted Answer · 2016-01-03 15:00:34

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

пример
$( document ).on( events, selector, data, handler );

ROMMEL · Accepted Answer · 2013-05-17 01:05:55

использовать jQuery.жить() вместо этого . Документация здесь

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

Michael · Accepted Answer · 2014-12-17 22:46:52

для ASP.NET попробуйте это:
<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>
это работает при загрузке страницы и при загрузке панели обновления

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

Real-Source · Accepted Answer · 2016-08-10 15:10:01

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

ChristianG · Accepted Answer · 2018-07-25 16:35:58

Если ваш ответ 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);
}

});