Как вызвать функцию jQuery в HTML, возвращаемую AJAX

Question

У меня есть страница, на которой у меня есть сообщения, и пользователи должны оставлять комментарии. Комментарии обрабатываются с использованием AJAX. Каждая строка комментария имеет кнопку «Голосовать».

На странице индекса я поместил функцию jQuery для голосования

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').click(function() {
               // Cast your vote
          }
     }
</script>

Теперь, когда пользователь отправляет новый комментарий, он делает вызов AJAX и добавляет HTML-код с помощью jQuery на страницу индекса

$.ajax({
        type: "POST",
        url: "proc/add-line.php",
        data: dataString,

        cache: false,
        success: function(html){
            $("ul#nextLines").append(html);
        }
    });

В добавленном HTML у меня та же кнопка голосования. (Каждый комментарий имеет соответствующую кнопку голосования).

Проблема в том, что кнопка «голосовать» в новом комментарии, сгенерированном AJAX, не работает. Если я обновил страницу, голосование работает (хотя я использую ту же разметку).

Как сделать так, чтобы кнопка голосования работала в AJAX, вернувшем HTML ??

Answer 1

Обновление

Это старый ответ.Начиная с jQuery 1.7, используйте .on() для достижения того же результата.Ниже приведен эквивалент исходного фрагмента ответа ниже:

$('#ul.nextlines').on('click', '.voteUpBtn', function (e) {
  // your voting logic here
});

---

Оригинальный ответ

Я бы порекомендовал использовать .delegate() более .live().Оба будут работать, но чистее иметь один обработчик событий для содержащего объекта.

$('#ul.nextlines').delegate( '.voteUpBtn', 'click', function(){
  // your voting logic here
});

Если вы не укажете контекст, .live() по существу свяжет обработчик с корнем всего DOM и, следовательно, будет следить за событиями во всем документе.Кроме того, при .live() селектор запускается немедленно, хотя желаемый эффект наступает в будущем.Таким образом, .live() не будет работать так же хорошо, как .delegate(), область действия которого ограничена и чей селектор (в данном случае ".voteUpBtn") не запускается немедленно.В некоторых случаях эти различия в производительности могут быть заметны, например, таблицы с множеством строк или списки с множеством элементов.

---

Answer 2

Используйте live вместо click:

$('.voteUpBtn').live('click', function() {
    // Cast your vote
}

Answer 3

Используйте делегат вместо live (если вы можете использовать jQuery> 1.4), поскольку он более эффективен .

Динамически добавленные элементы не выбираютсяпривязки jQuery без live или delegate на исходной привязке.

Answer 4

Когда вы вводите новый HTML-код на свою страницу (например, с помощью запроса AJAX), ранее настроенные события не назначаются автоматически новым элементам DOM.Таким образом, ваше событие click для элементов ".voteUpBtn" еще не произошло, даже если ваш новый элемент DOM может иметь свой атрибут класса, установленный на "voiceUpBtn".Вы должны снова добавить это событие во вновь представленные элементы DOM в функции успеха вашего AJAX-запроса.

Или ... вы можете использовать функцию live (), чтобы "прикрепить обработчик к событию для всехэлементы, которые соответствуют текущему селектору, сейчас и в будущем. "http://api.jquery.com/live/

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

Answer 5

Вы должны использовать метод ' live ' вместо 'click' для привязки события к кнопке.

$ ('. VoiceUpBtn'). Live ('click', function () { // Отдай свой голос }

Answer 6

Вы можете использовать live, чтобы «Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем»:

http://api.jquery.com/live/

Answer 7

Вы можете использовать метод live, чтобы прикрепить событие ко всем соответствующим элементам, даже если они еще не были созданы:

$('.voteUpBtn').live('click', function(){ ... });

Таким образом, когда загружается ваш ajax-контент, событие клика будет автоматически применено к новому .voteUpBtn.

Answer 8

Использовать jquery.live переплет

http://api.jquery.com/live/

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').live("click, "function() {
               // Cast your vote
          }
     }
</script>