jQuery how to bind onclick event to dynamically added HTML element

Question

I want to bind an onclick event to an element I insert dynamically with jQuery  But It never runs the binded function  I d be happy if you can point out why this example is not working and how I can get it to run properly    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN          x000D               http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D           lt html xmlns  http   www w3 org 1999 xhtml  xml lang  da  lang  da  gt  x000D           lt head gt  x000D             lt title gt test of click binding lt  title gt  x000D   x000D   lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt  x000D             lt script type  text javascript  gt  x000D   x000D   x000D          jQuery function    x000D            close link       lt a class    href     gt Click here to see an alert lt  a gt     x000D            close link bind  click   function    x000D              alert  hello from binded function call    x000D                do stuff here    x000D                x000D     x000D                add to this   append close link   x000D              x000D             lt  script gt  x000D           lt  head gt  x000D           lt body gt  x000D             lt h1  gt Test of click binding lt  h1 gt  x000D             lt p gt problem  to bind a click event to an element I append via JQuery  lt  p gt  x000D   x000D             lt div class  add to this  gt  x000D               lt p gt The link is created  then added here below  lt  p gt  x000D             lt  div gt  x000D   x000D             lt div class  add to this  gt  x000D               lt p gt Another is added here below  lt  p gt  x000D             lt  div gt  x000D   x000D   x000D           lt  body gt  x000D           lt  html gt  x000D   x000D   x000D    EDIT  I edited the example to contain two elements the method is inserted to  In that case  the alert   call is never executed   thanks to  Daff for pointing that out in a comment

User · Accepted Answer

The first problem is that when you call append on a jQuery set with more than one element, a clone of the element to append is created for each and thus the attached event observer is lost.

An alternative way to do it would be to create the link for each element:

function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('<a>Click here</a>').click(handler);
})

Another potential problem might be that the event observer is attached before the element has been added to the DOM. I'm not sure if this has anything to say, but I think the behavior might be considered undetermined. A more solid approach would probably be:

function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('<a>Click here</a>');
  $(this).append(link);
  link.click(handler);
});

User · Answer

function load tpl selected                  load tpl   empty            for x in ds tpl                   load tpl   append   lt li gt  lt a id    ds tpl x     href      gt   ds tpl x    lt  a gt  lt  li gt                         each     load tpl a   function                  this  on  click  function e                   alert e target id

User · Answer

All of these methods are deprecated  You should use the on method to solve your problem   If you want to target a dynamically added element you ll have to use     document  on  click   selector-to-your-element   function            code here            this replace the deprecated  live   method

User · Answer

lt html gt   lt head gt   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt       lt script gt        document  ready function              document  on  click     close   function                var rowid  row  this id              var sl     tblData tr id   rowid                  console log sl                 sl  remove                            addrow   click function                var row                 for var i 0 i lt 10 i                     row i                  row   lt tr id row  i   gt                             lt td gt   i   lt  td gt                             lt td gt ID  i   lt  td gt                             lt td gt NAME  i   lt  td gt                             lt td gt  lt input class close type button id   i   value X gt  lt  td gt                          lt  tr gt                    console log row                       tblData tr last   after row                                       lt  script gt   lt  head gt     lt body gt       lt br  gt  lt input type  button  id  addrow  value  Create Table   gt       lt table id  tblData  border  1  width  40   gt           lt thead gt           lt tr gt               lt th gt Sr lt  th gt               lt th gt ID lt  th gt               lt th gt Name lt  th gt               lt th gt Delete lt  th gt           lt  tr gt           lt  thead gt       lt  table gt       lt  body gt    lt  html gt

User · Answer

It is possible and sometimes necessary to create the click event along with the element  This is for example when selector based binding is not an option  The key part is to avoid the problem that Tobias was talking about by using  replaceWith   on a single element  Note that this is just a proof of concept    lt script gt         This simulates the object to handle     var staticObj               ID   1   Name   Foo               ID   2   Name   Foo               ID   3   Name   Foo               staticObj 1  children               ID   a   Name   Bar               ID   b   Name   Bar               ID   c   Name   Bar               staticObj 1  children 1  children               ID   x   Name   Baz               ID   y   Name   Baz                   This is the object-to-html-element function handler with recursion     var handleItem   function  item             var ul  li       lt li gt     item ID         item Name     lt  li gt              if typeof item children      undefined                 ul       lt ul   gt                 for  var i   0  i  lt  item children length  i                      ul append handleItem item children i                               li append ul                         This click handler actually does work         li click function e                alert item Name               e stopPropagation                        return li                 Wait for the dom instead of an ajax call or whatever       function             var ul       lt ul   gt              for  var i   0  i  lt  staticObj length  i                  ul append handleItem staticObj i                           Here  this works              something   replaceWith ul            lt  script gt   lt div id  something  gt Magical ponies   lt  div gt

User · Answer

Consider this   jQuery function      var close link       lt a class    href     gt Click here to see an alert lt  a gt               add to this   append close link             add to this   children   each function                     this  click function                 alert  hello from binded function call                  do stuff here                                It will work because you attach it to every specific element  This is why you need - after adding your link to the DOM - to find a way to explicitly select your added element as a JQuery element in the DOM and bind the click event to it    The best way will probably be - as suggested - to bind it to a specific class via the live method

User · Answer

I believe the good way it to do       id   append   lt a id   subid  href     gt     lt  a gt         subid   click  close link

User · Answer

How about the Live method       add to this a   live  click   function         alert  hello from binded function call          Still  what you did about looks like it should work  There s another post that looks pretty similar

User · Answer

A little late to the party but I thought I would try to clear up some common misconceptions in jQuery event handlers  As of jQuery 1 7   on   should be used instead of the deprecated  live    to delegate event handlers to elements that are dynamically created at any point after the event handler is assigned   That said  it is not a simple of switching live for on because the syntax is slightly different   New method  example 1      document  on  click     someting   function           Deprecated method  example 2        something   live function           As shown above  there is a difference  The twist is  on   can actually be called similar to  live    by passing the selector to the jQuery function itself   Example 3       something   on  click   function           However  without using   document  as in example 1  example 3 will not work for dynamically created elements  The example 3 is absolutely fine if you don t need the dynamic delegation      Should   document  on   be used for everything    It will work but if you don t need the dynamic delegation  it would be more appropriate to use example 3 because example 1 requires slightly more work from the browser  There won t be any real impact on performance but it makes sense to use the most appropriate method for your use      Should  on   be used instead of  click   if no dynamic delegation is needed    Not necessarily  The following is just a shortcut for example 3       something   click function           The above is perfectly valid and so it s really a matter of personal preference as to which method is used when no dynamic delegation is required   References    jQuery docs for  on   jQuery docs for  click   jQuery docs for  live

[javascript] jQuery how to bind onclick event to dynamically added HTML element

Examples related to javascript

Examples related to jquery

Examples related to bind