Как повторно применить $ (document) .ready () к некоторому частичному HTML, загруженному через AJAX?

Question

Я все еще новичок в jQuery и пытаюсь интегрировать шаблон ThemeForest в свой проект. Этот шаблон ThemeForest (vPanel) потрясающий, но он объединяет множество плагинов и функций jQuery, поэтому у меня много $ (document) .ready () повсюду, и мне трудно разобраться, какой сценарий делает то, что , Причина, по которой я ищу это, заключается в том, что все эти скрипты прекрасно применяются к странице, когда она первоначально загружается, но есть также некоторые части моего пользовательского интерфейса, которые загружаются позже через AJAX. И вот тут-то и начинается моя проблема: есть ли способ повторно применить все сценарии к частичному HTML, загружаемому через AJAX?

Answer 1

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

$("my_button").click(function(){ }

стать

$("my_button").live("click", function(){ }

, где "my_button" - это то, что может быть позже через AJAX.

Answer 2

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

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

function applyTemplate(context) {
  $('.someclass', context).each(function(){
    // does something with the elements
  });
}

$(function(){
  // apply to whole page:
  applyTemplate(document.body);
  // load more content, and apply to what's loaded:
  $('#somePart').load('getpart.aspx', function(){
    applyTemplate($('#somePart'));
  });
});