JQuery does not work for dynamically created elements

Question

I have a jQuery piece that goes through each element in a given div ( #container ), and every time a click is clicked, a javascript warning appears. This works fine if the <span> are static.

However, if I use a piece of code, for example:

 $(someLink).click(function(){ $("#container").html( <new html with new spans> ) }); 

JQuery code does not run. Oddly enough though

My question is: is there a reason why my Click events do not work for dynamically created elements? I assume I will have to add something to my document, ready or heartbeat - script (which runs every 100 milliseconds) to hook events

Answer 1

Do it:

  $( '#wrapper' ).on( 'click', 'a', function () { ... }); 

where #wrapper is the static element to which you add dynamic links.

So, you have a shell that is hard-coded into the HTML source code:

 <div id="wrapper"></div> 

and you fill it with dynamic content. The idea is to delegate events to this shell instead of binding handlers directly to dynamic elements.

---

Btw, I recommend Backbone.js - it gives structure for 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 

Answer 2

source: this post

if you created your elements dynamically (using javascript) then this code does not work. Because .click () attaches events to existing elements. Since you dynamically create your elements using javascript, this does not work.

To do this, you need to use some other functions that work with dynamically created elements. This can be done in many ways.

We used to have a live () function

 $('selector').live('click', function() { //your code }); 

but .live () is deprecated. It can be replaced by other functions.

delegate ():

Using the delegate () function, you can click on dynamically generated HTML elements.

Example:

 $(document).delegate('selector', 'click', function() { //your code }); 

ON ():

Using the on () function, you can click dynamically generated HTML elements.

Example:

 $(document).on('click', 'selector', function() { // your code }); 

Answer 3

Try something like

 $("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) }); 

You basically need to attach your events from the non-dynamic part of the DOM so that it can observe dynamically generated elements.

Answer 4

 $("#container").delegate("span", "click", function (){ alert(11); }); 

Answer 5

Using .click will only bind events to existing elements.

You need to use a function that controls dynamically generated events - in earlier versions of jQuery it was .live() , but it was replaced by . on ()

Answer 6

Use new jQuery for function in 1.7.1 -

http://api.jquery.com/on/

Answer 7

I ran into this problem a few days ago - the solution for me was to use .bind () to bind the required function to a dynamically created link.

 var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>'); catLink.bind("click", function(){ $.categories.getSubCategories(this); }); getSubCategories : function(obj) { //do something } 

Hope this helps.

Answer 8

You must add the click event to an existing element. You cannot add the generated dynamic event to dom elements. I want to add an event to them, you must bind the event to an existing element using ".on".

 $('p').on('click','selector_you_dynamic_created',function(){...}); 

.delegate should work too.