Привязать метод jQuery к Html, загруженному через вызов Ajax

У меня есть контент, который загружается из вызова ajax, но я хочу связать пользовательский метод (не событие) с элементами dom для достижения некоторой функциональности.

Большинство решений, которые я нахожу в Интернете, - это привязка событий к странице, например

$(".example").ajax({
  'success': function(data) {
     something()
  }
})

Я хочу добиться чего-то вроде "загрузки контента", потому что там нет событий..

$('.post').live('load', function() {
       .....
    });
Источник

6 ответов

Решение

Рассматривать .ajaxComplete,

http://api.jquery.com/ajaxComplete/

Например:

// Normally you have an anonymous function. Make it a named function.
function myInitialize(scope) {
    $('.button', scope).button();
}

// Call it in document ready to initialize stuff that loaded in the page.
$(myInitialize(null));

// Call it again in .ajaxComplete
// 'this' is the div that loaded or has new content.
$('*').ajaxComplete(myInitialize(this));
Источник

1) поместите все свои функции связывания в функцию...

2) теперь вызывайте эту функцию внутри $(document).load(), а также функцию успеха ajax, с помощью которой вы добавляете html в DOM

ПРИМЕЧАНИЕ * - Вызов этой функции внутри метода Success необходим, потому что ajax является синхронным, а метод success вызывается только после того, как на него приходит ответ, поскольку эти функции будут связаны, если они будут вызваны после добавления html в DOM

Источник

Вы можете использовать live, чтобы выполнить это, если у вас есть событие, к которому привязано это действие (например, onclick)... если нет, попробуйте livequery, который позволяет привязывать только действие при появлении элемента (никто не должен нигде щелкать для действие на огонь)

Источник

Из моего опыта за последние 2 дня я узнал, что есть несколько способов реализовать нужные вам функции

Вероятно, самый быстрый способ - это просто обработать необходимые данные с помощью пользовательской функции, которая будет вызываться непосредственно перед (или сразу после), когда вы получаете этот контент через AJAX и вставляете его в DOM.

$.ajax({
    success: function(data) {
        // do anything with data here
        data = $(data).find('#my_div').addClass('red');
        $('#element').append(data);
        // OR - do the neccessary amendments here
        $('#my_div').addClass('red');
    }
});

проще (но, возможно, медленнее) можно было бы по-прежнему использовать livequery для манипулирования нужным объектом - однако этот подход может быть очень медленным при неправильной настройке

$('#my_div').livequery(function() {
    $(this).addClass('red');
});

Я бы посоветовал прочитать некоторые ссылки, которые я получил, когда спрашивал о живом и живом исполнении

Источник

У меня возникли проблемы с подходом Parched ajaxComplete, который заключается в том, чтобы последовательно и в целом предоставить ему подходящую цель для применения поведения (например, AFAICT xhr.responseText не является частью документа, поэтому не может быть привязан к нему), поэтому я пришел к этому альтернативному подходу, который может оказаться полезным.

Во всех моих вызовах ajax я использую событие complete:, чтобы вызвать известное событие в месте назначения нового html. Например, контейнер с лицевой панелью или пункт назначения pjax.

// in my facebox ajax setup
$.ajax({
  ...,
  complete: function() {
    $('#facebox').trigger('end.facebox');
  }
}

Тогда отдельно я реагирую на это событие.

$('*').live('end.facebox', function(e) {
  if (e.target == this) {
    apply_behavior(this); // in the style of Parched Squid's myInitialize
  }
});

Я хотел бы услышать предложения / улучшения, но это кажется достаточно общим, чтобы согласованно учитывать несколько подходов ajax / типы событий и места назначения.

Источник

Согласно документации:

.live (eventType, eventData, обработчик)

eventTypeA строка, содержащая тип события JavaScript, такой как "щелчок" или "нажатие клавиши". Начиная с jQuery 1.4, строка может содержать несколько типов событий, разделенных пробелом, или имена пользовательских событий.

eventDataA карта данных, которые будут переданы в обработчик событий.

Функция handlerA для выполнения в момент запуска события.

Так что ты должен сделать это. Я не знаю, почему не работает. Я приглашаю вас проверить этот старый ответ.

Как сделать живые пользовательские события в jQuery

Я надеюсь, что это помогает!

Источник
Другие вопросы по тегам