jquery: как добавить обработчик события в динамически добавленный элемент без добавления его в существующий элемент снова

Question

Я попытаюсь объяснить свою проблему: У меня есть сайт, на котором пользователь динамически добавляет элементы. Все они принадлежат классу «toBuy». Когда новый элемент добавляется к этому классу, мне нужно прикрепить обработчик кликов только к этому элементу, но не ко всем остальным. Чтобы мой код был чистым, я хочу иметь функцию, которая выполняет эту работу. Вот что я пробовал:

это как добавляется материал:

$("#addItemButton").click(function(){ 
      var item= $('#item').val(); 
      $('#item').val(""); 
      var quantity= $('#quantity').val(); 
      $('#quantity').val(""); 
      var comment=$('#addComment').val(); 
      $('#addComment').val(""); 
      //construct new html 
      var newitem="<div class='toBuyItem'><div class='item'>"; 
      newitem+=item; 
      newitem+="</div><div class='quantity'>"; 
      newitem+=quantity; 
      newitem+="</div><div class='comment'><img src='img/comment"; 
      if(comment==""){ 
       newitem+="_none" 
      } 
      newitem+=".png' alt='Comment'></div><div class='itemComment'>" 
      newitem+=comment; 
      newitem+="</div></div>"; 

      $("#toBuyItems").prepend(newitem); 
      toggle("#addItemClicked"); 
      initializeEventListeners(); 
     }); 

, то это функция initializeEventListeners (которую я также запустить при загрузке страницы, чтобы существующие элементы имеют события обработчики уже:

function initializeEventListeners(){ 
     $(".toBuyItem").click(function(){ 
      console.log($(this).html()); 
      console.log($(this).has('.itemComment').length); 
      if($(this).has('.itemComment').length != 0){ 
       console.log("toggling"); 
       $(this).addClass("toggling"); 
       toggle(".toggling .itemComment"); 
       $(this).removeClass("toggling"); 
      }   
     }); 
    } 
function toggle(item){ 

     $(item).slideToggle(500); 
    } 

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

EDIT: так это работает:

$(document).on('click', '.toBuyItem', function(){ 
    if($(this).has('.itemComment').length != 0){ 
     console.log("toggling"); 
     $(this).addClass("toggling"); 
     toggle(".toggling .itemComment"); 
     $(this).removeClass("toggling"); 
    } 


    }); 

Answer 1

Используйте Jquery в. Таким образом, вы должны добавить event только один раз. Это будет добавлено автоматически к динамически добавленным элементам.

$(document/parentSelector).on('click', '.toBuyItem', function() { 
    // Event handler code here 
}); 

Если вы используете parentSelector в вышеприведенном синтаксисе, он должен присутствовать в момент добавления события.

Docs: https://api.jquery.com/on

Answer 2

Вы можете использовать jQuery.on method. Он может прикреплять обработчики ко всем существующим в DOM и создаваться в будущих тегах селектора. Синтаксис выглядит следующим образом:

on метод

$(document).on('click', '.toBuyItem', function(){ 
//do onClick stuff 
}) 

Answer 3

Как и другие предложили, вы можете делегировать обработку нажмите на document или какой-либо подходящий элемент контейнера, и это, вероятно, что я буду делать.

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

Вы можете выбрать, чтобы написать ...

function buy() { 
    if($(this).has('.itemComment').length != 0) { 
     $(this).addClass("toggling"); 
     toggle(".toggling .itemComment"); 
     $(this).removeClass("toggling"); 
    } 
} 
function initializeEventListeners() { 
    $(".toBuyItem").on('click', buy); 
} 
$("#addItemButton").on('click', function() { 
    var item = $('#item').val(), 
     quantity = $('#quantity').val(), 
     comment = $('#addComment').val(); 
    $('#item', '#quantity', '#addComment').val(""); 
    //construct and append a new item 
    var $newitem = $('<div class="toBuyItem"><div class="item">' + item + '</div><div class="quantity">' + quantity + '</div><div class="comment"><img alt="Comment"></div><div class="itemComment">' + comment + '</div></div>').prependTo("#toBuyItems").on('click', buy);// <<<<< here, you benefit from having named the click handler 
    $newitem.find(".comment img").attr('src', comment ? 'img/comment.png' : 'img/comment_none.png'); 
    toggle("#addItemClicked"); 
});