jQuery click not working for dynamically created items

Question

I have a piece of jQuery that loops through each  element in a given div   container  and does a javascript alert each time a span is clicked  This works fine if the  lt span gt  s are static   However  if I use a piece of code like     someLink  click function           container   html   lt new html with new spans gt          The jQuery code doesn t fire off  Oddly enough though  My question is   Is there a reason my Click events don t work for dynamically created items  I assume I will have to add something into my document ready or heartbeat-script  which is fired every 100 miliseconds  to hook up the events

User · Answer

Use the new jQuery on function in 1 7 1 -   http   api jquery com on

User · Answer

I faced this problem a few days ago - the solution for me was to use  bind   to bind the required function to the dynamically created link   var catLink       lt a href     id      i      class  lnkCat  gt     category category     lt  a gt     catLink bind  click   function       categories getSubCategories this        getSubCategories   function obj       do something     I hope this helps

User · Answer

Do this         wrapper    on   click    a   function                where  wrapper is a static element in which you add the dynamic links   So  you have a wrapper which is hard-coded into the HTML source code    lt div id  wrapper  gt  lt  div gt    and you fill it with dynamic content  The idea is to delegate the events to that wrapper  instead of binding handlers directly on the dynamic elements     Btw  I recommend Backbone js - it gives structure to this process   var YourThing   Backbone View extend           the static wrapper  the root for event delegation      el       wrapper             event bindings are defined here      events             click a    anchorClicked                 your DOM event handlers     anchorClicked  function                 handle click event              new YourThing     initializing your thing

User · Answer

source  this post if you created your elements dynamically using javascript   then this code doesn t work  Because   click   will attach events to elements that already exists  As you are dynamically creating your elements using javascript  it doesn t work  For this you have to use some other functions which works on dynamically created elements  This can be done in different ways   Earlier we have  live   function    selector   live  click   function       your code      but  live   is deprecated This can be replaced by other functions  Delegate    Using delegate   function you can click on dynamically generated HTML elements  Example    document  delegate  selector    click   function        your code      EDIT  The delegate   method was deprecated in version 3 0  Use the on   method instead  ON    Using on   function you can click on dynamically generated HTML elements  Example    document  on  click    selector   function        your code

User · Answer

Using  click will only attach events to elements that already exist   You need to use a function which monitors for dynamically created events - in older versions of JQuery this was  live    but this has been superceded by  on

User · Answer

Try something like       container   on  click    someLinkSelector   function        container   html   lt new html with new spans gt          You basically need to attach your events from a non-dynamic part of the DOM so it can watch for dynamically-created elements

User · Answer

container   delegate  span    click   function         alert 11

User · Answer

You have to add click event to an exist element  You can not add event to dom elements dynamic created  I you want to add event to them  you should bind event to an existed element using   on       p   on  click   selector you dynamic created  function             delegate should work too

[javascript] jQuery click not working for dynamically created items

Examples related to javascript

Examples related to jquery

Examples related to html