Click event doesn t work on dynamically generated elements

Question

lt html gt   lt head gt       lt script type  text javascript  src  jquery js  gt  lt  script gt       lt script type  text javascript  gt             document  ready function                     button   click function                        h2   html   lt p class  test  gt click me lt  p gt                                        test   click function                    alert                                      lt  script gt   lt  head gt   lt body gt       lt h2 gt  lt  h2 gt       lt button gt generate new element lt  button gt   lt  body gt   lt  html gt    I was trying to generate a new tag with class name test in the  lt h2 gt  by clicking the button  I also defined a click event associated with test  But the event doesn t work   Can anyone help

User · Answer

surrounding div class  on   click     test   function      alert   WORKS            Will only work if the DIV with the class  surrounding div class is the immediate parent to the object  test  If there is another object in the div that will be filled it wont work

User · Answer

You CAN add on click to dynamically created elements   Example below   Using a When to make sure its done   In my example  i m grabbing a div with the class expand  adding a  click to see more  span  then using that span to hide show the original div     when     expand   before   lt span class  clickActivate  gt Click to see more lt  span gt     then function            clickActivate   click function              this  next   toggle

User · Answer

Reason  In jQuery  Click   event binds the element only if the particular element exist in the Html code after page loads   It won t consider the future elements which are created dynamically Future element   Dynamic elements are created with the help of javascript or jquery not in Html   So the normal click event won t fire on the dynamic element  Solution   To overcome this we should use on    function  on   Can delegate the event for both current and future elements  delegate   live   and on   functions have the advantages over the DOM elements  delegate   and live   are deprecated Don t use these   on can only trigger both the existing and future elements  on can consider all the elements which are present on the whole page  You should use on function to trigger the event on dynamically future  created elements  Remove the code from   document  ready     quot  test quot   click function       alert          Change into    document  on  click    test  function       alert  Clicked

User · Answer

You need to use  live for this to work       test   live  click   function       alert          or if you re using jquery 1 7  use  on       test   on  click    p   function       alert

User · Answer

Use the  on   method with delegated events      staticParent   on  click     dynamicElement   function            Do something on an existent or future  dynamicElement       The  on   method allows you to delegate any desired event handler to   current elements or  future elements added to the DOM at a later time   P S  Don t use  live    From jQuery 1 7  the  live   method is deprecated

User · Answer

Add this function in your js file     It will work on every browser   x000D   x000D    function     x000D        document  on  click     mydiv   function     x000D          alert  You have just clicked on     x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  mydiv  gt Div lt  div gt  x000D   x000D   x000D

User · Answer

If you have a dinamically added link to some container or the body   var newLink      lt a gt  lt  a gt               id    approve-ctrl            href     approve            class    status-ctrl            data-attributes    DATA         html  Its ok   appendTo document body     you can take its raw javascript element and add an event listener to it  like the click   newLink get 0  addEventListener  click   doActionFunction     No matter how many times you add this new link instance you can use it as if you where using a jquery click function   function doActionFunction e        e preventDefault        e stopPropagation         alert   this  html         So you will receive a message saying      Its ok   It has better performance than other alternatives    Extra  You could gain better performance avoiding jquery and using plain javascript  If you are using IE up to version 8 you should use this polyfill to use the method addEventListener  if  typeof Element prototype addEventListener      undefined         Element prototype addEventListener   function  e  callback          e    on    e        return this attachEvent e  callback

User · Answer

Change        test   click function      To        test   live  click   function      LIVE DEMO  jQuery  live

User · Answer

An alternate and more succinct alternative  IMHO  is to use a raw javascript function that responds to an on click event  then pass the target element back to jQuery if you like  The advantage of this approach is that you can dynamically add your element anywhere  and the click handler will  just work   and you need not concern yourself with delegating control to parent elements  and so on        Step 1   Update the dynamic html to fire an onclick event  Be sure to pass the  event  object as an argument            button   click function                h2   html   lt p class  test  onclick  test event    click me  lt  p                 Step 2   Create the test function to respond to the click event          function test e           alert                 Optional Step 3   Given you are using jQuery I m assuming it will be useful to get a reference back to the source button          function test e           alert                Get a reference to the button            An explanation of this line is available here         var target    e target   e target   e srcElement              Pass the button reference to jQuery to do jQuery magic         var  btn     target

User · Answer

Also you can use onclick  do something this  inside element

User · Answer

I m working with tables adding new elements dynamically to them  and when using on    the only way of making it works for me is using a non-dynamic parent as    lt table id  myTable  gt       lt tr gt           lt td gt  lt  td gt     Dynamically created          lt td gt  lt  td gt     Dynamically created          lt td gt  lt  td gt     Dynamically created      lt  tr gt   lt  table gt    lt input id  myButton  type  button  value  Push me   gt    lt script gt          myButton   click function                 myTable tr   append   lt td gt  lt  td gt                      myTable   on  click    td   function                Your amazing code here           lt  script gt    This is really useful because  to remove events bound with on    you can use off    and to use events once  you can use one

User · Answer

I couldn t get live or delegate to work on a div in a lightbox  tinybox    I used setTimeout successfullly  in the following simple way       displayContact   click function         TINY box show  html   lt form gt  lt textarea id  contactText  gt  lt  textarea gt  lt div id  contactSubmit  gt Submit lt  div gt  lt  form gt    close true        setTimeout setContactClick  1000       function setContactClick             contactSubmit   click function             alert     contactText   val

User · Answer

The problem you have is that you re attempting to bind the  test  class to the event before there is anything with a  test  class in the DOM  Although it may seem like this is all dynamic  what is really happening is JQuery makes a pass over the DOM and wires up the click event when the ready   function fired  which happens before you created the  Click Me  in your button event    By adding the  test  Click event to the  button  click handler it will wire it up after the correct element exists in the DOM    lt script type  text javascript  gt        document  ready function                                         button   click function                                                     h2   html   lt p class  test  gt click me lt  p gt                                              test   click function                                              alert                                                                                                              lt  script gt    Using live    as others have pointed out  is another way to do this but I felt it was also a good idea to point out the minor error in your JS code  What you wrote wasn t wrong  it just needed to be correctly scoped  Grasping how the DOM and JS works is one of the tricky things for many traditional developers to wrap their head around    live   is a cleaner way to handle this and in most cases is the correct way to go  It essentially is watching the DOM and re-wiring things whenever the elements within it change

User · Answer

The Jquery  on works ok but I had some problems with the rendering implementing some of the solutions above  My problem using the  on is that somehow it was rendering the events differently than the  hover method   Just fyi for anyone else that may also have the problem  I solved my problem by re-registering the hover event for the dynamically added item   re-register the hover event because hover doesn t work for dynamically created items  so every time i create the new dynamic item i add the hover code again  works perfectly      someID div last   hover      function                             function

User · Answer

Use  on  as click gets bind to the elements already present   For e g     test   on  click  function        alert  Test         This will help

User · Answer

live function works great   It is for Dynamically added elements to the stage       selectAllAssetTypes   live  click   function event                       alert  BUTTON CLICKED                            assetTypeCheckBox   attr  checked   true                         Cheers  Ankit

User · Answer

Best way to apply event on dynamically generated content by using delegation     document  on  eventname   selector  function           code goes here       so your code is like this now    document  on  click    test  function           code goes here

User · Answer

The click   binding you re using is called a  direct  binding which will only attach the handler to elements that already exist  It won t get bound to elements created in the future  To do that  you ll have to create a  delegated  binding by using on         Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time    Source  Here s what you re looking for    x000D   x000D  var counter   0  x000D   x000D     button   click function     x000D         h2   append   lt p class  test  gt click me        counter      lt  p gt    x000D      x000D   x000D     With on    x000D   x000D     h2   on  click    p test   function    x000D      alert   this  text     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D   lt h2 gt  lt  h2 gt  x000D   lt button gt generate new element lt  button gt  x000D   x000D   x000D    The above works for those using jQuery version 1 7   If you re using an older version  refer to the previous answer below     Previous Answer   Try using live        button   click function           h2   html   lt p class  test  gt click me lt  p gt                 test   live  click   function        alert  you clicked me           Worked for me  Tried it with jsFiddle   Or there s a new-fangled way of doing it with delegate        h2   delegate  p    click   function        alert  you clicked me again           An updated jsFiddle

User · Answer

Try  live   or  delegate    http   api jquery com live   http   api jquery com delegate   Your  test element was added after the  click   method  so it didn t have the event attached to it  Live and Delegate give that event trigger to parent elements which check their children  so anything added afterwards still works  I think Live will check the entire document body  while Delegate can be given to an element  so Delegate is more efficient   More info   http   www alfajango com blog the-difference-between-jquerys-bind-live-and-delegate

User · Answer

I found two solutions at the jQuery s documentation   First  Use delegate on Body or Document  E g            body   delegate   test    click   function           alert  test           Why   Answer  Attach a handler to one or more events for all elements that match the selector  now or in the future  based on a specific set of root elements  link  http   api jquery com delegate   Second  Put the your function at the     document     using  on  and attach it to the element that you want to trigger this  The first parameter is the  event handler   the second  the element and the third  the function   E g              document   on   click     test   function             alert  test           Why   Answer   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    To ensure the elements are present and can be selected  perform event binding inside a document ready handler for elements that are in the HTML markup on the page  If new HTML is being injected into the page  select the elements and attach event handlers after the new HTML is placed into the page  Or  use delegated events to attach an event handler  as described next     link  https   api jquery com on

[jquery] Click event doesn't work on dynamically generated elements

Examples related to jquery

Examples related to events