How do I attach events to dynamic HTML elements with jQuery

Question

Suppose I have some jQuery code that attaches an event handler to all elements with class  myclass    For example     function            myclass   click  function                do something               And my HTML might be as follows    lt a class  myclass  href     gt test1 lt  a gt   lt a class  myclass  href     gt test2 lt  a gt   lt a class  myclass  href     gt test3 lt  a gt    That works with no problem  However  consider if the  myclass elements were written to the page at some future time   For example    lt a id  anchor1  href     gt create link dynamically lt  a gt   lt script type  text javascript  gt    function            anchor1   click  function                 anchor1   append   lt a class  myclass  href     gt test4 lt  a gt                  lt  script gt    In this case  the test4 link is created when a user clicks on a anchor1   The test4 link does not have the click   handler associated with it  even though it has class  myclass    Basically  I would like to write the click   handler once and have it apply to both content present at page load  and content brought in later via AJAX   DHTML  Any idea how I can fix this

User · Answer

You can bind a single click event to a page for all elements, no matter if they are already on that page or if they will arrive at some future time, like that:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

Been using it for a while. Works like a charm.

In jQuery 1.7 and later, it is recommended to use .on() in place of bind or any other event delegation method, but .bind() still works.

User · Answer

You want to use the live   function  See the docs   For example       anchor1   live  click   function             anchor1   append   lt a class  myclass  href     gt test4 lt  a gt

User · Answer

Sometimes doing this  the top-voted answer  is not always enough      body   on  click    a myclass   function            do something       This can be an issue because of the order event handlers are fired  If you find yourself doing this  but it is causing issues because of the order in which it is handled   You can always wrap that into a function  that when called  refreshes  the listener   For example   function RefreshSomeEventListener            Remove handler from existing elements         wrapper  specific-selector   off             Re-add event handler for all matching elements         wrapper  specific-selector   on  click   function                Handle event            Because it is a function  whenever I set up my listener this way  I typically call it on document ready     document  ready function            Other ready commands   code         Call our function to setup initial listening     RefreshSomeEventListener          Then  whenever you add some dynamically added element  call that method again   function SomeMethodThatAddsElement            Some code   AJAX   whatever   Adding element dynamically         Refresh our listener  so the new element is taken into account     RefreshSomeEventListener        Hopefully this helps   Regards

User · Answer

Binds a handler to an event  like click  for all current - and future - matched element  Can also bind custom events   link text    function            myclass   live  click   function                do something

User · Answer

If you re adding a pile of anchors to the DOM  look into event delegation instead    Here s a simple example       somecontainer   click function e         var  target     e target        if   target hasClass  myclass             do something

User · Answer

After jQuery 1 7 the preferred methods are  on   and  off     Sean s answer shows an example   Now Deprecated      Use the jQuery functions  live   and  die     Available in   jQuery 1 3 x      From the docs            To display each paragraph s text in an     alert box whenever it is clicked      p   live  click   function      alert    this  text                   Also  the livequery plugin does this and has support for more events

User · Answer

If your on jQuery 1 3  then use  live       Binds a handler to an event  like   click  for all current - and future -   matched element  Can also bind custom   events

User · Answer

I am adding a new answer to reflect changes in later jQuery releases  The  live   method is deprecated as of jQuery 1 7    From http   api jquery com live      As of jQuery 1 7  the  live   method is deprecated  Use  on   to attach event handlers  Users of older versions of jQuery should use  delegate   in preference to  live       For jQuery 1 7  you can attach an event handler to a parent element using  on    and pass the a selector combined with  myclass  as an argument   See http   api jquery com on   So instead of         myclass   click  function            do something       You can write        body   on  click    a myclass   function            do something       This will work for all a tags with  myclass  in the body  whether already present or dynamically added later   The body tag is used here as the example had no closer static surrounding tag  but any parent tag that exists when the  on method call occurs will work  For instance a ul tag for a list which will have dynamic elements added would look like this      ul   on  click    li   function         alert    this  text            As long as the ul tag exists this will work  no li elements need exist yet

[javascript] How do I attach events to dynamic HTML elements with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to dhtml