Regarding addEventListener event

Question

I am using the addEventListener event on one of the buttons in MVC datatable. (I am using that button to Show image in popup corresponding to that row).   So when I clicked on that button in first row in datatable, it works fine. But as I go to the same button on a diferent row, it does not do anything.   Maybe multiple addEventListener is not working.   So need help in this.   Kindly Thank you in advance.   Following is code snippet : document.getElementById( "buttonopenimage" ).addEventListener( "click" , ShowSnapOnHistory, false );   function  ShowSnapOnHistory()   {   alert($( "#hdnFlag" ).val());   $.ajax({   url:  '@Url.Action("ShowReceiptImageInPopup", "Transaction")' ,   type:  'GET' ,   data: { Id: $( "#hdnFlag" ).val() },   dataType:  'json' ,   success:  function  (result) {   var  image =  new  Image();   image.src =  'https://api.shoppercoin.io/UploadedFiles/'  + result.reclist.ReceiptName;   // $('#imgReceipt').attr('src', 'https://api.shoppercoin.io/UploadedFiles/' + result.reclist.ReceiptName);    var  viewer =  new  Viewer(image,   {   hidden:  function  () {   viewer.destroy();   },   });   // image.click();    viewer.show();   }   });   }

Ashish Vishwakarma · Answer

You should use class selector instead of ID

Sagar Malde · Answer

Hi Sushant,   The problem is with the Id of buttons. There cannot be same Id to the Multiple buttons. You should use common class instead.
If you look in developer console, you evetlistener is mapped to the first element with matching Id. Because when you add any jquery event with respect to Id it will always bind the first element with the matching Id other elements will be untouched.   When you use class for binding events it will consider all the elements with the provided class name so your all buttons with the class will be mapped with that eventlistener.

Salman Beg · Answer

Hi. This id buttonopenimage you added in all the button click event I think. So for first it will work but when you click second then it got confused. So work around is, in place of id as buttonopenimage you can give name as buttonopenimage. Otherwise add the same button click event for all the button and in the button click function retrieve individual id of that row. Thanks