Jquery Class non available after .html()

Question

So i'm using many Jquery plugins that work perfectly when i statically create the elements. but when the elements are created through .html() or .append() these plugins do not seem to work anymore, and i can't seem to figure out why. Any hint ? Thanks in advance.

So here is an example of a table that i want to create and add the plugin data-table to it:

<a href="javascript:void(0)" title="" onclick="AddElements();">Add</a>
<div id="Container"></div>

<script>
function AddElements()
{
CodeSrouce = '<table cellpadding="0" cellspacing="0" border="0" class="dTable"><thead><th>Name</th><th>Id</th></thead><tbody>';
for(i=0;i<3;i++)
{
CodeSrouce += '<tr><td>'+Name[i]+'</td><td>'+Id[i]+'</td></tr>';
}
CodeSrouce += '</tbody></table>';
$("#Container").html(CodeSrouce);
}
</script>

Are you using stuff like `.click()`? Those calls only run on elements that exist on document ready. You need to use `.on('click', x)` for elements you are creating dynamically. — Andy, Mar 11 '13 at 14:42
Have you trigger angain the event / plugin after add your HTML ? — Yoann, Mar 11 '13 at 14:43
As @DoubleYo suggests, you probably need to get the plugin to rerun its initialization. They generally don't work dynamically. Perhaps you could add some information such as *which* plugins and show some code. better yet, put together a [fiddle](http://www.jsfiddle.net) — Matt Burland, Mar 11 '13 at 14:45
http://api.jquery.com/on/ http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — isherwood, Mar 11 '13 at 14:45

score 1 · Answer 1 · answered Mar 11 '13 at 14:46

When the plugins are called like this:

$("#myElement").myPlugin();

The page looks for the element myElement and then binds the plugin to it. If it can't find the element, then your code will do nothing.

As such, when you create the element, you'll need to run the code after the element has been created.

$(function(){
  $("body").append("<ul id='myElement'><li>Hello</ul>");
});

$("#myElement").click(function(){
  console.log("This will never get triggered as it needs to be called after the     append"); 
});

bipen · Accepted Answer · 2013-03-11T14:51:12.800

that is beacuse... the dynamically created elements won't have the reference to the plugins..

you can call the plugins for that element again after appending the element ...after html() or append()

example..

for datepicker..

if the input is appended dynamically ....say

 $("#whatever").append('<input id="test"/>';

even though having $('#test').datepicker(); in document.ready, datepicker won't show up for this appended input since when datepicker was called this element was not present inthe DOMtree ,so for this you need to call the datepicker plugin again after append()

$("#whatever").append('<input id="test"/>';
$('#test').datepicker();

score 0 · Answer 3 · answered Mar 11 '13 at 14:47

0

Use jQuery On method to catch events in dynamically created objects. Normal event handlers wont work on dynamically created objects.

answered Mar 11 '13 at 14:47

codeVerine

742
3
14

Jquery Class non available after .html()

3 Answers3