Of Stack

Matters needing attention when binding events with on in jQuery

  • 2021-08-05 08:15:07
  • OfStack

With the update of jQuery version, Bind (), live () and delegate () events in previous versions can be directly replaced by on. This note only takes click events as an example, and mainly examines the usage of on events:

1. Use on to listen to the DOM added before the click event, which can trigger normally: 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oDiv = $('<div id="test"> Order me </div>');
 $(document.body).append(oDiv);
 $("#test").on('click', function(){
 alert(' This is added before the event DOM, Click events can be triggered normally ');
 });
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>

2. The DOM added after listening to the click event with on cannot be triggered normally: 


<!-- 1.  Normal DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#test").on('click', function(){
 alert(' This is added after the event DOM, Unable to trigger click events normally ');
 });
 var oDiv = $('<div id="test"> Order me </div>');
 $(document.body).append(oDiv);
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>

3. Solution: Use event delegation. It should be noted that the delegated object must already exist in DOM or be dynamically added before the event. At this time, the event can be triggered normally after listening with on, otherwise, as follows: Step 4: 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 $("#wrap").on('click', $('#test'), function(){
 alert(' Delegate object is added before the event , Click events can be triggered normally ');
 });
 var oDiv = $('<div id="test"> Order me </div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>

4. The delegate object is added after the event, and the click event cannot be triggered 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#wrap").on('click', $('#test'), function(){
 alert(' Delegate object is added after the event , Unable to trigger click events normally ');
 });
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 var oDiv = $('<div id="test"> Order me </div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>

5. Note: In the work, on event is more commonly used or event binding and event delegate, at least I encountered more, live event on usage is mainly the previous jQuery object becomes document, such as: $(document). on (), so no other example.

Related articles: