On and Live behave differently on dynamic addition of elements

Question

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.

You should probably be using delegate(); on() only works if the element exists on the page when you call that code. — MassivePenguin, Sep 17 '12 at 11:17
`.live()` is deprecated and you should have a look at the documentation for the different versions of [.on()](http://api.jquery.com/on/) and there usage. — Andreas, Sep 17 '12 at 11:23

Denys Séguret · Answer 1 · 2012-09-17T11:21:24.967

0

If you want to have your selector to be dynamically tested, you must pass it as argument, as in your code you're calling a function on a constant empty collection :

jQuery(document).ready(function(){
   var i=0;
   function test(event){
      var elem=jQuery(this).parent().html();
      jQuery("body").append("<div class=DivClass" + i++ +   ">"+elem+"</div>" );
    } 
   $(document).on("click", ".button", test);
});

(you'll see I defined test here before I pass it to the function, your code hurts my eyes)

edited Sep 17 '12 at 11:21

answered Sep 17 '12 at 11:15

Denys Séguret

372,613
87
782
758

Then again, if i want to pass some arguments as objects in the on plugin, jQuery(".button").on("click", {foo: "bar"}, test);, then how did i do that? – Mohamed Hussain Sep 17 '12 at 11:39
Use the data argument (see http://api.jquery.com/on/). But please note that on isn't a plugin but a function. – Denys Séguret Sep 17 '12 at 11:42

score 0 · Answer 2 · answered Sep 17 '12 at 11:21

0

jQuery('body').on('click', '.button', test);

answered Sep 17 '12 at 11:21

OptimusCrime

14,662
13
58
96

On and Live behave differently on dynamic addition of elements

2 Answers2