Hi there,
If I understand this correctly, you are inserting content into the DOM, but the required behaviour is not being attached to the inserted elements.
The solution to this is to use jQuery’s .on()
method, but to bind it to an element that exists when the page is first rendered.
An example:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery scaffold</title>
</head>
<body>
<button class="clickMe">Click Me!</button>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".clickMe").on("click", function(){
$("<button>",
{
class: "clickMe",
text: "Click Me!"
}
).appendTo("body");
});
});
</script>
</body>
</html>
Here, when you click the original “Click Me!” button, it will insert another (identical) button into the page.
The problem is that these inserted buttons do nothing when clicked, the behaviour of the original button was not attached to them.
Now, if we change the click handler to this:
$(document).on("click", ".clickMe", function(){
the new buttons will also have the behaviour of the original button.
In this case we have bound the click event handler to an element that existed when the page was rendered (document) and specified a selector string to filter the descendants of the selected element that triggers the event.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery scaffold</title>
</head>
<body>
<button class="clickMe">Click Me!</button>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
$(document).on("click", ".clickMe", function(){
$("<button>",
{
class: "clickMe",
text: "Click Me!"
}
).appendTo("body");
});
});
</script>
</body>
</html>
http://api.jquery.com/on/
I hope that helps and is relevant to your issue, but as fretburner said, it would really help to see some code.
Also, please note, that prior to jQuery 1.7, this behaviour was achieved using the now deprecated .live()
method.