Adding click event listener to elements with the same class

by

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 < 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 => {
    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.

More Related Contents:

  1. .prop() vs .attr()
  2. What is JSONP, and why was it created?
  3. string.charAt(x) or string[x]?
  4. Why doesn’t equality check work with arrays [duplicate]
  5. What is “x && foo()”?
  6. Promise – is it possible to force cancel a promise
  7. Include jQuery in the JavaScript Console
  8. Iterate through object properties
  9. Expose jQuery to real Window object with Webpack
  10. getElementById() returns null even though the element exists [duplicate]
  11. JavaScript KeyCode vs CharCode
  12. How can I control the back button event in jQuery Mobile?
  13. Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)
  14. How to make a shared state between two react components?
  15. Angular 2.1.0 create child component on the fly, dynamically
  16. What’s the purpose of starting semi colon at beginning of JavaScript? [duplicate]
  17. What is the most efficient way to reverse an array in Javascript?
  18. How to resize html canvas element?
  19. Where should functions in function components go?
  20. How do I connect this interval service to a view?
  21. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  22. Regular expression for not allowing spaces in the input field
  23. Do you know what may cause memory leaks in JavaScript?
  24. HTML5 input required, scroll to input with fixed navbar on submit
  25. Function not calling within an onclick event
  26. Set cookie on multiple domains with PHP or JavaScript
  27. Computed properties in Backbone
  28. Get Element StyleSheet Style in JavaScript
  29. How to import a js library without definition file in typescript file
  30. Is there a way to catch an attempt to access a non existant property or method?

Leave a Comment