Adding click event listener to elements with the same class

Question

I have a list view for delete id  I d like to add a listener to all elements with a particular class and do a confirm alert   My problem is that this seems to only add the listener to the first element with the class it finds  I tried to use querySelectorAll but it didn t work     var deleteLink   document querySelector   delete     deleteLink addEventListener  click   function event        event preventDefault         var choice   confirm  sure u want to delete         if  choice            return true              List    lt  php      while  obj  result- gt fetch object                  echo   lt li gt  lt a class  delete  href  removeTruck php tid    obj- gt id    gt    obj- gt id   lt  a gt                   lt a href     class  delete  gt  lt  a gt                         lt  li gt     n                free result set         result- gt close                mysqli- gt close      gt

User · Answer

The problem with using querySelectorAll and a for loop is that it creates a whole new event handler for each element in the array   Sometimes that is exactly what you want  But if you have many elements  it may be more efficient to create a single event handler and attach it to a container element  You can then use event target to refer to the specific element which triggered the event   document body addEventListener  click   function  event      if  event target classList contains  delete          var title   event target getAttribute  title         if   confirm  sure u want to delete     title           event preventDefault                    In this example we only create one event handler which is attached to the body element  Whenever an element inside the body is clicked  the click event bubbles up to our event handler

User · Answer

ES5  I use forEach to iterate on the collection returned by querySelectorAll and it works well    document querySelectorAll  your selector   forEach item   gt       do the job with item element

User · Answer

You have to use querySelectorAll as you need to select all elements with the said class  again since querySelectorAll is an array you need to iterate it and add the event handlers  var deleteLinks   document querySelectorAll   delete    for  var i   0  i  lt  deleteLinks length  i          deleteLinks i  addEventListener  click   function  event            event preventDefault             var choice   confirm  sure u want to delete             if  choice                return true

User · Answer

I find it more convenient to use something like the following  document querySelector      addEventListener  click  function event        if  event target tagName     quot IMG quot            return                HANDLE CLICK ON IMAGES HERE

User · Answer

You should use querySelectorAll  It returns NodeList  however querySelector returns only the first found element   var deleteLink   document querySelectorAll   delete      Then you would loop   for  var i   0  i  lt  deleteLink length  i          deleteLink i  addEventListener  click   function event            if   confirm  sure u want to delete     this title                 event preventDefault                          Also you should preventDefault only if confirm     false    It s also worth noting that return false true is only useful for event handlers bound with onclick   function          For addEventListening you should use event preventDefault     Demo  http   jsfiddle net Rc7jL 3     ES6 version  You can make it a little cleaner  and safer closure-in-loop wise  by using Array prototype forEach iteration instead of for-loop   var deleteLinks   document querySelectorAll   delete     Array from deleteLinks  forEach link   gt        link addEventListener  click   function event            if   confirm  sure u want to delete   this title                   event preventDefault                             Example above uses Array from and template strings from ES2015 standard

User · Answer

A short and sweet solution  using ES6   document querySelectorAll   input          forEach input   gt  input addEventListener  focus   this onInputFocus

[javascript] Adding click event listener to elements with the same class

Examples related to javascript