jQuery live vs on method for adding a click event after loading dynamic html

Question

I am using jQuery v 1 7 1 where the  live   method is apparently deprecated    The problem I am having is that when dynamically loading html into an element using       parent   load  http             If I try and add a click event afterwards it does not register the event using either of these methods       parent   click function            or     according to documentation this should be used instead of  live       child   on  click   function            What is the correct way to achieve this functionality  It only seems to work with  live   for me  but I shouldn t be using that method  Note that  child is a dynamically loaded element    Thanks

User · Answer

I used  live  in my project but one of my friend suggested that i should use  on  instead of live  And when i tried to use that i experienced a problem like you had   On my pages i create buttons table rows and many dom stuff dynamically  but when i use on the magic disappeared   The other solutions like use it like a child just calls your functions every time on  every click  But i find a way to make it happen again and here is the solution   Write your code as   function caller            ObjectYouWntToCall   on  click   function       magic           Call caller    after you create your object in the page like this       lt dom class  ObjectYouWntToCall  gt bla    bla    lt dom gt    appendTo   whereeveryouwant    caller      By this way your function is called when it is supposed to not every click on the page

User · Answer

I know it s a little late for an answer  but I ve created a polyfill for the  live   method  I ve tested it in jQuery 1 11  and it seems to work pretty well  I know that we re supposed to implement the  on   method wherever possible  but in big projects  where it s not possible to convert all  live   calls to the equivalent  on   calls for whatever reason  the following might work   if jQuery  amp  amp   jQuery fn live        jQuery fn live   function evt  func               body   on evt  this selector  func             Just include it after you load jQuery and before you call live

User · Answer

on   is for jQuery version 1 7 and above   If you have an older version  use this       SomeId   live  click  function          do stuff

User · Answer

The equivalent of  live   in 1 7 looks like this     document  on  click     child   function            Basically  watch the document for click events and filter them for  child

User · Answer

Try this       parent   on  click     child   function            Code       From the   on   documentation      Event handlers are bound only to the currently selected elements  they   must exist on the page at the time your code makes the call to  on      Your  child element doesn t exist when you call   on   on it  so the event isn t bound  unlike   live      parent  however  does exist  so binding the event to that is fine   The second argument in my code above acts as a  filter  to only trigger if the event bubbled up to  parent from  child

User · Answer

document  on  click     selector   function        do stuff         EDIT  I m providing a bit more information on how this works  because    words  With this example  you are placing a listener on the entire document    When you click on any element s  matching  selector  the event bubbles up to the main document -- so long as there s no other listeners that call event stopPropagation   method -- which would top the bubbling of an event to parent elements   Instead of binding to a specific element or set of elements  you are listening for any events coming from elements that match the specified selector  This means you can create one listener  one time  that will automatically match currently existing elements as well as any dynamically added elements   This is smart for a few reasons  including performance and memory utilization  in large scale applications   EDIT   Obviously  the closest parent element you can listen on is better  and you can use any element in place of document as long as the children you want to monitor events for are within that parent element    but that really does not have anything to do with the question

User · Answer

If you want the click handler to work for an element that gets loaded dynamically  then you set the event handler on a parent object  that does not get loaded dynamically  and give it a selector that matches your dynamic object like this       parent   on  click     child   function          The event handler will be attached to the  parent object and anytime a click event bubbles up to it that originated on  child  it will fire your click handler   This is called delegated event handling  the event handling is delegated to a parent object    It s done this way because you can attach the event to the  parent object even when the  child object does not exist yet  but when it later exists and gets clicked on  the click event will bubble up to the  parent object  it will see that it originated on  child and there is an event handler for a click on  child and fire your event

[javascript] jQuery .live() vs .on() method for adding a click event after loading dynamic html

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to dom

Examples related to handler