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

Question

У меня есть часть кода, которая динамически загружается с помощью вызова 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()?

Answer 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*/}

Answer 2

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

Answer 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");