jQuery on()

jQuery.on() is really nice. It’s now recommended that you use on() instead of bind() delegate() or live(). I use live a good deal, so I thought it would make sense to create a small demo showing how to use on() instead of live.

These boxes are created after the event listener has been added via on:

Here is the code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
      $(function(){
        var debug = $("#debug");
        var doc = $(document);
 
        // create event listener
        doc.on("click", ".box", function(){
          debug.append("click ");
        });
 
        // create elements
        for (var i = 0; i < 3; i++){
          $("<div>",{
            "class" : "box",
            text : "click me"
          }).prependTo("body"); 
        }
 
      });
    </script>
    <style>
      body,html{
        background-color : #333; 
        font-family : Helvetica, sans-serif;
      }
      .box{
        position: relative;
        float : left;
        width : 50px;
        height : 50px;
        margin : 2px;
        padding : 5px;
        background-color : #7e9fc2 ;
        cursor : pointer;
        font-size : 11px;
      }
      #debug{
        position : relative;
        clear : both;
        border : 1px solid gray;
        color : white;
      }
    </style>
  </head>
  <body>
    <div id="debug"></div>
  </body>
</html>


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free