Events triggered by dynamically generated element are not captured by event handler

by

You need to delegate the event to the closest static ancestor element within the page (see also “Understanding Event Delegation”). This simply means, the element where you bind your event handler must already exist at the time the handler is bound, so for dynamically generated elements you must allow the event to bubble up and handle it further up.

The jQuery .on method is the way to do this (or .delegate for older versions of jQuery.)

// If version 1.7 or above

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

Or in older versions

// If version 1.6 or below

// note the selector and event are in a different order than above
$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});

More Related Contents:

  1. Why is my javascript not working
  2. event.preventDefault() vs. return false
  3. How to apply !important using .css()?
  4. Make cross-domain ajax JSONP request with jQuery
  5. Load More Posts Ajax Button in WordPress
  6. Check with jquery if div has overflowing elements
  7. Remove querystring from URL
  8. Playing sound notifications using Javascript?
  9. Show loading image while $.ajax is performed
  10. How can I bind to the change event of a textarea in jQuery?
  11. jQuery Ajax requests are getting cancelled without being sent
  12. Detect if user is using webview for android/iOS or a regular browser
  13. Array Like Objects in Javascript
  14. How to select all checkboxes with jQuery?
  15. How to detect right mouse click + paste using JavaScript?
  16. Popup window to return data to parent on close
  17. IP to Location using Javascript
  18. How is a non-breaking space represented in a JavaScript string?
  19. jQuery index() in vanilla javascript
  20. What is the difference between JavaScript and jQuery? [closed]
  21. How to check browser for touchstart support using JS/jQuery?
  22. Dynamically adding cases to a switch
  23. How can I make a button redirect my page to another page? [duplicate]
  24. jQuery .on(‘change’, function() {} not triggering for dynamically created inputs
  25. jQuery get html of container including the container itself
  26. Change placeholder text
  27. Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button
  28. fadeOut() and slideUp() at the same time?
  29. Jquery change text between two elements
  30. What does this JavaScript/jQuery syntax mean?

Leave a Comment