jQuery: How to add event handler to dynamically added HTML elements?

by

UPDATE

It’s been a while since I posted this answer and things have changed by now:

$(document).on('click', '.click', function() {

});

Since jQuery 1.7+ the new .on() should be used and .live() is deprecated. The general rule of thumb is:

  • Don’t use .live() unless your jQuery version doesn’t support .delegate().
  • Don’t use .delegate() unless your jQuery version doesn’t support .on().

Also check out this benchmark to see the difference in performance and you will see why you should not use .live().

Below is my original answer:

use either delegate or live

$('.click').live('click', function(){
});

or

$('body').delegate('.click', 'click', function() {

});

More Related Contents:

  1. javascript: hiding contents of key
  2. Need Pattern for password field?
  3. Trigger a keypress/keydown/keyup event in JS/jQuery?
  4. Using jQuery’s ajax method to retrieve images as a blob
  5. Why does javascript replace only first instance when using replace? [duplicate]
  6. How to get a style attribute from a CSS class by javascript/jQuery?
  7. Submit multiple forms with one submit button
  8. Jquery: change event to input file on IE
  9. jquery clone form fields and increment id
  10. Limiting number of lines in textarea
  11. jQuery counting elements by class – what is the best way to implement this?
  12. Google Maps Display:None Problem
  13. Closures in a for loop
  14. JavaScript keypress event not raised on Android browser
  15. Error handling in getJSON calls
  16. How to make Jquery UI Tabs scroll horizontally if there are too many tabs
  17. Choosing Mobile Web HTML5 Framework [closed]
  18. Check if date is in the past Javascript
  19. jquery window.open in ajax success being blocked
  20. how to bind Bootstrap-datepicker element with angularjs ng-model?
  21. Is JQGrid free?
  22. Show text letter by letter
  23. Prevent firing focus event when clicking on div
  24. What is the purpose of this? (function ($) { //function code here })(jQuery);
  25. Get element’s ID and set it as variable
  26. What is the purpose of backbone.js?
  27. Bootstrap and jQueryUI Conflict
  28. Match all URLs in string and return in array in JavaScript
  29. Ajax POST not sending data when calling ‘request.POST’ in Django view
  30. How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Leave a Comment