Difference between on() and live() or bind() in jQuery

jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below.

bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector condition is satisfied for an event afterward, bind() will not work on that function. It also won’t work in the case if selector condition is removed from the element.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <!-- CDN for jQuery -->
        <script src=
        </script>
    </head>
    <body>
        <div class="content">
            <p class="a">This is Statement 1.</p>
            <script>
                /* Here, the bind() works on elements 
                   initialized beforehand only */
                $(".a").bind("click",function(){
                    $(this).css("color","red"); 
                });
            </script>
            <p class="a">This is Statement 2.</p>
            <!-- click() method works on Statement 
                   1 but not on Statement 2. -->
        </div>
    </body>
    </html>                            

    chevron_right

    
    

  • Output:
    Before clicking those statement:

    After clicking those statement:

live() method: This method attaches events not only to existing elements but also for the ones appended in the future as well but it won’t work in the case if selector condition is removed from the element.

Note: The live() method was deprecated in jQuery version 1.7, and removed in version 1.9.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <!-- Old CDN for .live() to work in jQuery -->
        <script src=
        </script>
        </head>
    <body>
        <div class="content">
            <p class="a">This is Statement 1.</p>
            <script>
                /* live() method works for elements 
                   appended later as well */
                $(".a").live("click",function(){
                    $(this).css("color","red"); 
                });
            </script>
            <p class="a">This is Statement 2.</p>
            <!-- live() method works on both Statement 
                 1 and Statement 2. -->
        </div>
    </body>
    </html>                    

    chevron_right

    
    

  • Output:
    Before clicking those statement:

    After clicking those statement:

on() method: This method attaches events not only to existing elements but also for the ones appended in the future as well. The difference here between on() and live() function is that on() method is still supported and uses a different syntax pattern, unlike the above two methods.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <!-- CDN for jQuery -->
        <script src=
        </script>
    </head>
    <body>
        <div class="content">
            <p class="a">This is Statement 1.</p>
            <script>
                /* Works on all elements within scope 
                   of the document */
                $(document).on("click",".a",function(){
                    $(this).css("color","red"); 
                });
            </script>
            <p class="a">This is Statement 2.</p>
            <!-- on() method works on both Statement
                 1 and Statement 2. -->
        </div>
    </body>
    </html>                                            

    chevron_right

    
    

  • Output:
    Before clicking those statement:

    After clicking those statement:

Differences summarized for the above methods:

Property bind() live() on()
Deprecated Yes Yes No
Removed No Yes No
Scope Elements initialized beforehand For both current and future event binding For both current and future event binding
Syntax: $([selector]).bind([event],[function]); $([selector]).live([event],[function]); $(document).bind([event],[selector],[function]);

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.