События привязки jquery к динамически загружаемым html-элементам - PullRequest
6 голосов
/ 19 июня 2011

используя jquery, мы можем прикрепить обработчики событий к элементам, присутствующим на странице, это делается внутри функции document.ready (). Теперь моя проблема в том, что у меня есть некоторые элементы, такие как ссылки и т. Д., Загруженные позже (с помощью ajax-запроса) после загрузки документа. Таким образом, эти новые элементы не могут связываться с обработчиками, которые я определил на странице. Есть ли какой-нибудь способ узнать, когда выполняются ajax-запросы и затем внутри них я могу связать свои обработчики событий.

Заранее спасибо

Ответы [ 4 ]

22 голосов
/ 19 июня 2011

Различные методы ajax принимают обратный вызов, где вы можете привязать обработчики к новым элементам.

Вы также можете использовать делегирование события с delegate() [документы] метод или live() [документы] метод.

Концепция делегирования событий заключается в том, что вы не привязываете обработчик к самому элементу, а к некоторому родительскому контейнеру, который существует при загрузке страницы.

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

Например:

<div id="some_container"> <!-- this is present when the page loads -->

    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->


    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->

    <span>some text</span>  <!-- this one won't match the selector -->
    <span>some text</span>  <!-- this one won't match the selector -->

</div>

Live Пример: http://jsfiddle.net/5jKzB/

Таким образом, вы привязываете обработчик к some_container и передаете селектор к .delegate(), который в данном случае ищет "a.link".

Когда элемент, соответствующий этому селектору, щелкается внутри some_container, вызывается обработчик.

$('#some_container').delegate('a.link', 'click', function() {
    // runs your code when an "a.link" inside of "some_container" is clicked
});

Таким образом, вы можетеобратите внимание, что не имеет значения, когда элементы "a.link" добавляются в DOM, пока существует some_container при загрузке страницы.

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

$('a.link').live('click',function() {
    // runs your code when any "a.link" is clicked
});
4 голосов
/ 19 июня 2011

Тогда вы захотите использовать .live(). Посмотрите на http://api.jquery.com/live/.

Пример:

$('a').live('click', function() {
  // Do something useful on click.
});

В приведенном выше примере любые элементы A, уже существующие или загруженные после загрузки документа, вызовут событие click.

2 голосов
/ 07 февраля 2014

Эти ответы теперь устарели, поскольку метод .live () устарел с версии 1.7 в jQuery. Для jQuery 1.7+ вы можете прикрепить обработчик событий к родительскому элементу, используя .on ()

0 голосов
/ 19 июня 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...