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

17 Dec, 2021
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:<!DOCTYPE html><html><head>    <!-- CDN for jQuery -->    <script src="https://code.jquery.com/jquery-3.4.1.js">    </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>                            
<!DOCTYPE html><html><head>    <!-- CDN for jQuery -->    <script src="https://code.jquery.com/jquery-3.4.1.js">    </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>                            
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:<!DOCTYPE html><html><head>    <!-- Old CDN for .live() to work in jQuery -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">    </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>                    
<!DOCTYPE html><html><head>    <!-- Old CDN for .live() to work in jQuery -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">    </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>                    
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:<!DOCTYPE html><html><head>    <!-- CDN for jQuery -->    <script src="https://code.jquery.com/jquery-3.4.1.js">    </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>                                            
<!DOCTYPE html><html><head>    <!-- CDN for jQuery -->    <script src="https://code.jquery.com/jquery-3.4.1.js">    </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>                                            
Output:Before clicking those statement:After clicking those statement:
Differences summarized for the above methods:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
younessarbouhdev
jQuery-Methods
jQuery-Misc
Picked
HTML
JQuery
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Form validation using jQuery
How to place text on image using HTML and CSS?
How to auto-resize an image to fit a div container using CSS?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to add options to a select element using jQuery?