If you have inserted DOM objects into the HTML in $(document).ready(function() {…}). Those binded events will not applied to newly inserted DOM objects. In the following example, a new button is inserted whenever the .btn is clicked. but it is only valid for the first .btn button.
<html>
<head>
<title>jQuery - Bind event to newly inserted element</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.btn').click(function() {
$('<input class="btn" type="button" />').insertAfter(this);
});
});
</script>
</head>
<body>
<input class="btn" type="button" />
</body>
</html>
If you want to bind the event to all buttons including those which are newly inserted, the live() function could help. Try the following piece of code.
<html>
<head>
<title>jQuery - Bind event to newly inserted element</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.btn').live('click', function() {
$('<input class="btn" type="button" />').insertAfter(this);
});
});
</script>
</head>
<body>
<input class="btn" type="button" />
</body>
</html>
Done =)
Reference: jQuery API – .live()
Eureka! 
Thanks for posting this – I have struggling with trying to track new buttons in the DOM and your tip saved me a lot of pain!
LikeLike
Good to know that i could help. Thanks for you comment. =)
LikeLike
I’d suggest you to read about .delegate() and .on() methods; there are some performance issues related with the use of .live().
http://api.jquery.com/delegate/
http://api.jquery.com/on/
LikeLike
Thanks for your comment. I will try it next time when i meet similar situations. =)
LikeLike