Подсказки jquery и ajax не работают с загруженным контентом

Question

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

Я использую плагин jquery.pageLess, который делает ajax-вызов для нумерации страниц, встроенной в рельсы, чтобы загружать новые элементы на страницу при прокрутке вниз (во многом как новый макет изображений Google).

Однако я также использую плагин tipsy для добавления всплывающих подсказок к части изображения загружаемой ссылки.

Эти всплывающие подсказки прекрасно работают с элементами, которые не были загружены pageLessly (которые уже были на первоначально загруженной странице), но не отображаются на элементах, которые были загружены pageLess. Я предполагаю, что pageLess делает живой запрос в реальном времени об обновлении страницы, но плагин подсказки не делает и, следовательно, не загружается ни на одну из новых ссылок, которые возвращает pageLess.

Как я могу заставить мои функции jQuery работать в контексте контента с активной загрузкой / ajaxed?

Answer 1

$('selector').tipsy({
  live: true
});

http://onehackoranother.com/projects/jquery/tipsy/

Поддержка живых событий
Живые события поддерживаются с помощью параметра {live: true}.Требуется jQuery ≥ 1.4.1, а всплывающие подсказки не поддерживают ручной запуск.

Редактировать
Другой способ - привязать подсказки к новым элементам после того, как онибыл создан.Пример:

$('selector').tipsy();

// post, get, ajax, etc
$.post(..., function(data) {
  // in the return function, first create the new elements
  ...

  // call on the tipsy method again
  // the selector will now also match the newly created elements
  $('selector').tipsy();
});

Если в вашем методе tipsy много переменных, и вы не хотите его повторять, может быть проще создать отдельную функцию.Пример:

// create the function 
function setupTipsy() {
  $('selector').tipsy({
    html: true,
    gravity: 'w',
    etc..
  });
}

// call on the function when the document has been loaded
setupTipsy();

// post, get, ajax, etc
$.post(..., function(data) {
  // in the return function, first create the new elements
  ...

  // call on the same function again
  setupTipsy();
});