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

Question

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

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

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

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

$('.post').live('load', function() {
       .....
    });

Answer 1

Рассмотрим .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));

Answer 2

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

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

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

Answer 3

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

Во всех моих вызовах ajax я использую событие complete: для запуска известного события в месте назначения нового html.Например, контейнер для Facebox или пункт назначения 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 и пунктов назначения.

Answer 4

из моего опыта за последние 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');
});

---

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

Answer 5

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

Answer 6

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

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

строка eventTypeA, содержащая Тип события JavaScript, такой как «щелчок» или "ключом вниз". Начиная с jQuery 1.4 строка может содержать несколько Разделенные пробелами типы событий или пользовательские Имена событий , а также.

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

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

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

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

Надеюсь, это поможет!