I am having the following code, i tried with jQuery live and on plugin, while trying with live, i am able to add the event handler which is already present for the element with the class "button" to the newly added element(added dynamically after page load) with the class "button" but on trying with the jQuery on plugin, i am unable to add the already existing event handler to the newly added element.
Example with Live
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="script/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<!--START: Adding of javaScript library need internet Connection-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--END: Adding of javaScript library need internet Connection-->
</head>
<script>
jQuery(document).ready(function(){
jQuery(".button").live("click", test);
});
var i=0;
function test(event){
var elem=jQuery(this).parent().html();
jQuery("body").append("<div class=DivClass" + i++ + ">"+elem+"</div>" );
}
</script>
<body>
<div id="Container"><input value="click me" class="button" type="button"/></div>
</body>
</html>
Example With On
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="script/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<!--START: Adding of javaScript library need internet Connection-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--END: Adding of javaScript library need internet Connection-->
</head>
<script>
jQuery(document).ready(function(){
jQuery(".button").on("click", test);
});
var i=0;
function test(event){
var elem=jQuery(this).parent().html();
jQuery("body").append("<div class=DivClass" + i++ + ">"+elem+"</div>" );
}
</script>
<body>
<div id="Container"><input value="click me" class="button" type="button"/></div>
</body>
</html>
and moreover i am able to put the event handler binding code using live outside of jquery ready which is working fine but if i put event handler binding using on outside of jquery ready, the event handler is not working.Thanks in advance for any help.