jquery live click vs click

Question

I am wondering whether there are any circumstances where it would be better to use  click function         rather than  live  click   function           From what I gather the live option seems to be a better option and I am hence using it in almost all circumstances instead of the plain  click    especially given a lot of my code is loaded asynchronously   EDIT  Another part to this question  If I m asynchoronously loading all the javascript in   click will still pickup all elements already in the dom  Right

User · Answer

live   is used if elements are being added after the initial page load  Say you have a button which gets added by an AJAX call after the page gets loaded  This new button will not be accessible using  click    so you ll have to use  live  click

User · Answer

Note 29 08 2017  live was deprecated many versions ago and removed in v1 9  delegate was deprecated in v3 0  In both cases  use the delegating signature of on instead  also covered below       live happens by capturing the event when it s bubbled all the way up the DOM to the document root  and then looking at the source element  click happens by capturing the event on the element itself  So if you re using live  and one of the ancestor elements is hooking the event directly  and preventing it continuing to bubble   you ll never see the event on your element  Whereas normally  the element nearest the event  click or whatever  gets first grab at it  the mix of live and non-live events can change that in subtle ways   For example    x000D   x000D  jQuery function      x000D   x000D       span   live  click   function     x000D      display   lt tt gt live lt  tt gt  caught a click     x000D        x000D   x000D        catcher   click function     x000D      display  Catcher caught a click and prevented  lt tt gt live lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D    function display msg    x000D          lt p gt    html msg  appendTo document body   x000D      x000D   x000D      x000D   lt div gt  x000D     lt span gt Click me lt  span gt  x000D     lt span gt or me lt  span gt  x000D     lt span gt or me lt  span gt  x000D     lt div gt  x000D       lt span gt I m two levels in lt  span gt  x000D       lt span gt so am I lt  span gt  x000D     lt  div gt  x000D     lt div id  catcher  gt  x000D       lt span gt I m two levels in AND my parent interferes with  lt tt gt live lt  tt gt  lt  span gt  x000D       lt span gt me too lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt  -- Using an old version because  live  was removed in v1 9 -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  x000D   lt  script gt  x000D   x000D   x000D    I d recommend using delegate over live when you can  so you can more thoroughly control the scope  with delegate  you control the root element that captures the bubbling event  e g   live is basically delegate using the document root as the root   Also  recommend avoiding  where possible  having delegate or live interacting with non-delegated  non-live event handling     Here several years later  you wouldn t use either live or delegate  you d use the delegating signature of on  but the concept is still the same  The event is hooked on the element you call on on  but then fired only when descendants match the selector given after the event name    x000D   x000D  jQuery function      x000D   x000D      document  on  click    span   function     x000D      display   lt tt gt live lt  tt gt  caught a click     x000D        x000D   x000D        catcher   click function     x000D      display  Catcher caught a click and prevented  lt tt gt live lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D    function display msg    x000D          lt p gt    html msg  appendTo document body   x000D      x000D   x000D      x000D   lt div gt  x000D     lt span gt Click me lt  span gt  x000D     lt span gt or me lt  span gt  x000D     lt span gt or me lt  span gt  x000D     lt div gt  x000D       lt span gt I m two levels in lt  span gt  x000D       lt span gt so am I lt  span gt  x000D     lt  div gt  x000D     lt div id  catcher  gt  x000D       lt span gt I m two levels in AND my parent interferes with  lt tt gt live lt  tt gt  lt  span gt  x000D       lt span gt me too lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

live  is needed when you dynamically generate code  Just look the below example     x000D   x000D      div1   find  button   click function     x000D          lt button   gt    x000D        text  BUTTON   x000D        appendTo   div1   x000D     x000D      div2   find  button   live  click   function     x000D          lt button   gt    x000D        text  BUTTON   x000D        appendTo   div2   x000D     x000D  button   x000D    margin  5px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 6 0 jquery min js  gt  lt  script gt  x000D   lt div id  div1  gt  x000D     lt button gt Click lt  button gt  x000D   lt  div gt  x000D   lt div id  div2  gt  x000D     lt button gt Live lt  button gt  x000D   lt  div gt  x000D   x000D   x000D    without  live  the click-event occurs only when you click the first button  with  live  the click-event occurs also for the dynamically generated buttons

User · Answer

All objects that would be associated with the  click must exist when you set the event   Example   in pseudo code  the append can be    body   append   for example  append   lt div id  foo  class  something  gt     lt  div gt        div something   click function          append   lt div id  bar  class  something  gt     lt  div gt       Click works for foo but doesn t work for bar  Example2   append   lt div id  foo  class  something  gt     lt  div gt        div something   live  click  function          append   lt div id  bar  class  something  gt     lt  div gt       click works for both foo and bar  With  live  click     you can dynamicaly add more objects after you created the event and the clicking event will still work

User · Answer

From what I understand the key difference is that live   keeps an eye open for new DOM elements that match the selector you are working on  whereas click    or bind  click    attach the event hook and are finished   Given that alot of your code is loaded asynchronously  using live   will make your life alot easier  If you don t know exactly the code you are loading but you do know what kind of elements you will be listening to  then using this function makes perfect sense   In terms of performance gains  one alternative to using live   would be to implement an AJAX callback function to re-bind the event hooks   var ajaxCallback   function            unbind  click         something   bind  click   someFunction        somethingElse   bind  click   someOtherFunction       You will need to keep proper track of your event hooks and make sure this function is rebinding the proper events   p s  Ajax methods  get     post     load   and  ajax   all let you specify a callback function

User · Answer

If you need simplify code then live is better in the most cases  If you need to get the best performance then delegate will always better than live  bind  click  vs delegate isn t so simple question  if you have a lot of similar items then delegate will be better

User · Answer

As  live  will handle events for future elements that match the current selector  you may choose click as you don t want that to happen - you only want to handle the current selected elements   Also  I suspect  though have no evidence  that there is a slight efficiency using  click  over  live    Lee

User · Answer

In addition to T J  Crowders answer  I have added some more handlers - including the newer  on      handler to the snippet so you can see which events are being hidden and which ones not   What I also found is that  live   is not only deprecated  but was deleted since jQuery 1 9 x  But the other ones  i e   click   delegate  undelegate and  on  off  are still there   Also note there is more discussion about this topic here on Stackoverflow   If you need to fix legacy code that is relying on  live  but you require to use a new version of jQuery    1 8 3   you can fix it with this snippet      fix if legacy code uses  live  but you want to user newer jQuery library if     fn live           in this case  live does not exist  emulate  live by calling  on       fn live   function events  handler            this  on events  null      handler              The intention of the snippet below  which is an extension of T J  s script  is that you can try out by yourself instantly what happens if you bind multiple handlers - so please run the snippet and click on the texts below    x000D   x000D  jQuery function      x000D   x000D        live connects function with all spans x000D       span   live  click   function     x000D      display   lt tt gt live lt  tt gt  caught a click     x000D        x000D   x000D       --- catcher1 events --- x000D   x000D        click connects function with id  catcher1  x000D        catcher1   click function     x000D      display  Click Catcher1 caught a click and prevented  lt tt gt live lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D       --- catcher2 events --- x000D   x000D        click connects function with id  catcher2  x000D        catcher2   click function     x000D      display  Click Catcher2 caught a click and prevented  lt tt gt live lt  tt gt    lt tt gt delegate lt  tt gt  and  lt tt gt on lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D        delegate connects function with id  catcher2  x000D      document  delegate   catcher2    click   function     x000D      display  Delegate Catcher2 caught a click and prevented  lt tt gt live lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D        on connects function with id  catcher2  x000D      document  on  click     catcher2       function     x000D      display  On Catcher2 caught a click and prevented  lt tt gt live lt  tt gt  from seeing it     x000D      return false  x000D        x000D   x000D       --- catcher3 events --- x000D   x000D        delegate connects function with id  catcher3  x000D      document  delegate   catcher3    click   function     x000D      display  Delegate Catcher3 caught a click and  lt tt gt live lt  tt gt  and  lt tt gt on lt  tt gt  can see it     x000D      return false  x000D        x000D   x000D        on connects function with id  catcher3  x000D      document  on  click     catcher3       function     x000D      display  On Catcher3 caught a click and and  lt tt gt live lt  tt gt  and  lt tt gt delegate lt  tt gt  can see it     x000D      return false  x000D        x000D   x000D    function display msg    x000D          lt p gt    html msg  appendTo document body   x000D      x000D   x000D      x000D   lt  -- with JQuery 1 8 3 it still works  but  live was removed since 1 9 0 -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  x000D   lt  script gt  x000D   x000D   lt style gt  x000D  span frame   x000D      line-height  170   border-style  groove  x000D    x000D   lt  style gt  x000D   x000D   lt div gt  x000D     lt span class  frame  gt Click me lt  span gt  x000D     lt span class  frame  gt or me lt  span gt  x000D     lt span class  frame  gt or me lt  span gt  x000D     lt div gt  x000D       lt span class  frame  gt I m two levels in lt  span gt  x000D       lt span class  frame  gt so am I lt  span gt  x000D     lt  div gt  x000D     lt div id  catcher1  gt  x000D       lt span class  frame  gt  1 - I m two levels in AND my parent interferes with  lt tt gt live lt  tt gt  lt  span gt  x000D       lt span class  frame  gt me too lt  span gt  x000D     lt  div gt  x000D     lt div id  catcher2  gt  x000D       lt span class  frame  gt  2 - I m two levels in AND my parent interferes with  lt tt gt live lt  tt gt  lt  span gt  x000D       lt span class  frame  gt me too lt  span gt  x000D     lt  div gt  x000D     lt div id  catcher3  gt  x000D       lt span class  frame  gt  3 - I m two levels in AND my parent interferes with  lt tt gt live lt  tt gt  lt  span gt  x000D       lt span class  frame  gt me too lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

remember that the use of  live  is for  jQuery 1 3  or higher  in version  jQuery 1 4 3  or higher is used  delegate   and version  jQuery 1 7    or higher is used  on      selector   live  events  data  handler       jQuery 1 3     document   delegate  selector  events  data  handler       jQuery 1 4 3     document   on  events  selector  data  handler       jQuery 1 7    As of jQuery 1 7  the  live   method is deprecated   check http   api jquery com live   Regards  Fernando

User · Answer

Always use click if you not dynamically add elements   live works by adding an event listener to the document root and listens for bubbled up events  An alternative is delegate  which works the same  but binds the event handler to the specified element  This way  the event has not to bubble up the whole DOM and is caught earlier

User · Answer

There might be times when you explicitly want to only assign the click handler to objects which already exist  and handle new objects differently  But more commonly  live doesn t always work  It doesn t work with chained jQuery statements such as     this  children   live  click  doSomething     It needs a selector to work properly because of the way events bubble up the DOM tree   Edit  Someone just upvoted this  so obviously people are still looking at it  I should point out that live and bind are both deprecated  You can perform both with  on    which IMO is a much clearer syntax  To replace bind     selector  on  click   function                    and to replace live     document  on  click   selector  function                    Instead of using   document   you can use any jQuery object which contains all the elements you re monitoring the clicks on  but the corresponding element must exist when you call it

[jquery] jquery .live('click') vs .click()

Examples related to jquery

Examples related to live