функция не работает при загрузке ссылок - функция jQuery

Question

Вначале я извиняюсь с тобой за мой английский! Я учился с 2 лет!

У меня есть эта проблема с моей функцией загрузки котировки сообщений для моего сайта.

Функция может работать следующим образом:

• Пользователи нажимают на ссылку вроде как

  <a class="quote" href="i.quote.php?n=022050" rel="quote_link">Show quote</a>

• Функция Аякса получить текст в кавычках.

• текст ответа заменяет

  <a class="quote" href="i.quote.php?n=022050" rel="quote_link">Show quote</a>

  с

  <blockquote class='rounded'>text quote found</blockquote>

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

Это функция:

$('a[rel=quote_link]').on('click',function(){ 

linkQuote = $(this).attr('href'); 
textQuoted = $.ajax({url:linkQuote,type:"GET",async:!1}).responseText; 

$(this).replaceWith("<blockquote class='rounded'>" + textQuoted + "</blockquote>"); 

event.preventDefault(); 

}); 

Я прочитал на stackoverflow.com, что использовать jQuery.on(), но функция все еще не работает!

Спасибо вам всем :).

Извините за мой английский, и я надеюсь, что я понимаю правила размещения нового вопроса.

Answer 1

Существует два типа обработки событий - обработка статических событий и делегирование обработки событий (оба выполняются с помощью .on(). Статические обработчики событий прикрепляются непосредственно к любым объектам, которые соответствуют вашему селектору, и существуют в момент установки обработчика событий. Это то, что вы используете, так как новые созданные элементы не существуют в момент установки ваших обработчиков событий, они не получают никаких обработчиков событий.

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

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

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?

Основная концепция делегированными обработки событий:

$(some static parent selector).on("click", 'a[rel=quote_link]', function() {...});