Присоединение плагинов jQuery к динамически загружаемым элементам через jQuery, on()

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

<div class="parent">
     <!-- Inner content loaded dynamically -->
     <div class="child">
     </div>
     <div class="child">
     </div>
     <!-- ... -->
</div>

Теперь, чтобы подключить событие mouseover, я бы сделал что-то вроде этого:

$(".parent").on("mouseenter", ".child", function(){
 //Do fun stuff here
}

$(".parent").on("mouseleave", ".child", function(){
 //Undo fun stuff here
}

Это работает достаточно хорошо для стандартных функций, но я хочу приложить это к стороннему плагину (в моем случае HoverIntent, но действительно любой плагин ) -

Синтаксис для прикрепления плагина HoverIntent выглядит так:

$(".child").hoverIntent( makeTall, makeShort )

... но я хочу, чтобы это работало для моего динамического контента, который не был доступен на момент загрузки документа, и что-то вроде $(".parent").on("hoverIntent", ".child", function(){});, похоже, не подходит для этого.

Каков правильный подход к применению плагина к элементам, загруженным после начального $(document).ready()?

Ответ 1

jquery .on работает, отслеживая события на родительском объекте, а затем вызывает обработчик, если событие возникло из соответствующего дочернего селектора. В вашем случае, однако, событие, которое вы хотите отслеживать, состоит в том, что элемент изменил

Браузеры запускают событие onchange только для входных элементов (потому что они могут быть изменены пользователем).

Если какой-либо другой элемент изменяется, он должен быть из-за javascript, поэтому вы можете вызывать функции после создания нового содержимого.

$(".child", parentElementContext).hoverIntent( makeTall, makeShort )

Существует 2 практических решения

1) Обычно я создаю метод init, который принимает контекст (например, документ).

MyPage.init = function(context) {
    $('.selector', context).hoverIntent();
    $('.other', context).dialog(); // any other plugins
};

Затем я вручную вызываю init при обновлении DOM (потому что мне не всегда нужно вызывать init при обновлении dom)

$.ajax({
  url: url,
  data: data,
  success: function(data){ 
     var context = $('.parent'); 
     context.html(data);
     MyPage.init(context); //calls hoverIntent and other plugins
  }
});

2) Если вам действительно нужно контролировать все, вы можете использовать этот плагин http://james.padolsey.com/javascript/monitoring-dom-properties/

а затем $('.parent').on('valuechange', function() { /* init plugins*/}

Ответ 2

Я использовал jQuery Livequery plugin в прошлом, чтобы сделать это

Ответ 3

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

$(".parent .child").live("mouseover", function(){
    //Do fun stuff here
}).live("mouseout", function(){
    //Undo fun stuff here
});

чтобы ваш плагин мог выглядеть так:

$.fn.hoverIntent = function(mouseover, mouseout) {
    this.live("mouseover", mouseover).live("mouseout", mouseout);
    return this;
};

и вы можете вызвать этот плагин

$(".parent .child").hoverIntent(makeTall, makeShort).load("other_page.php");