add event listener on elements created dynamically

by

It sounds like you need to pursue a delegation strategy without falling back to a library. I’ve posted some sample code in a Fiddle here: http://jsfiddle.net/founddrama/ggMUn/

The gist of it is to use the target on the event object to look for the elements you’re interested in, and respond accordingly. Something like:

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // do your action on your 'li' or whatever it is you're listening for
  }
});

CAVEATS! The example Fiddle only includes code for the standards-compliant browsers (i.e., IE9+, and pretty much every version of everyone else) If you need to support “old IE’s” attachEvent, then you’ll want to also provide your own custom wrapper around the proper native functions. (There are lots of good discussions out there about this; I like the solution Nicholas Zakas provides in his book Professional JavaScript for Web Developers.)

More Related Contents:

  1. How to trigger event in JavaScript?
  2. Javascript “addEventListener” Event Fires on Page Load [duplicate]
  3. How to check whether dynamically attached event listener exists or not?
  4. How to remove all listeners in an element? [duplicate]
  5. Want to add “addEventListener” on multiple elements with same class [duplicate]
  6. Why Firefox says that window.event is undefined? (call function with added event listener)
  7. event.preventDefault() vs. return false
  8. What is DOM Event delegation?
  9. What is event bubbling and capturing?
  10. The value of “this” within the handler using addEventListener
  11. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  12. How to get a word under cursor using JavaScript?
  13. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  14. DOM event precedence
  15. HTML input file selection event not firing upon selecting the same file
  16. Pass mouse events through absolutely-positioned element
  17. In React, what’s the difference between onChange and onInput?
  18. Trigger onmouseover event programmatically in JavaScript
  19. Do I need to remove event listeners before removing elements?
  20. How to fire a change event on a HTMLSelectElement if the new value is the same as the old?
  21. With form validation: why onsubmit=”return functionname()” instead of onsubmit=”functionname()”?
  22. cloning javascript event object
  23. JavaScript KeyCode Values are “undefined” in Internet Explorer 8
  24. Call a Javascript function every 5 seconds continuously [duplicate]
  25. How to listen for child window closing?
  26. JavaScript Event prototype in IE8
  27. Keycode is always zero in Chrome for Android
  28. The “onchange” event does not work with “value” change in “text input” object
  29. Replacement for deprecated `keypress` DOM event
  30. Manually dispatchEvent DOMContentLoaded

Leave a Comment