Pre-binding and post-binding in js

The main meaning is that I have not used pre-binding, that is, when some elements in the Dom tree have not been created, it specifies some events that should be owned by elements of this type as soon as they are born. In actual development, pre-binding and post-binding are often involved. As the name suggests, some events are bound before the binding -- before being born, and only after the binding -- after birth.
The following is a simple example for your reference and comparison of each method:
Page elements:
<Div id = "main">
<A href = "#"> aaaaaaaaaaaaaaaaaaaaaa </a> <br/>
<A href = "#"> bbbbbbbbbbbbbbbbbbbbbb </a> <br/>
<A href = "#"> ccccccccccccccccccccccc </a> <br/>
<A href = "#"> dddddddddddddddddddd </a> <br/>
<A href = "#"> eeeeeeeeeeeeeeeeeeeeeeee </a> <br/>
<A href = "#"> fffffffffffffffffffffffffffffff </a> <br/>
<A href = "#"> gggggggggggggggggg </a> <br/>
<A href = "#"> hhhhhhhhhhhhhhhhhhhhhh </a>
</Div>
<Input type = "button" value = "Create a tag" id = "btnCreate"/>

Js in the page:
<Script src = "201102/Scripts/jquery-1.5.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// Post-binding, that is, the dynamically created element cannot own the Bound event !!!
// 1. Bind later
// $ ("# Main> a"). click (function (){
// Alert(%(this%.html ());
//});

// 2. Bind later
// $ ("# Main> a"). bind ("click", function (){
// Alert ($ (this). text ());
//});

// 3. Bind it later,
// $ ("# Main> a"). bind ({
// Click: function () {alert ($ (this). text ());},
// Mouseover: function () {callback (this).css ("background-color", "red ")},
// Mouseout: function () {callback (this).css ("background-color", "white ")}
//});
$ ("# BtnCreate"). bind ({
Click: function () {$ ("<br/> <a href = '#'> I created dynamically </a> "). appendTo ("# main ");}
});


// 4. Pre-bound, the dynamically created element also has a click event
// $ ("# Main"). delegate ("a", "click", function (){
// Alert ($ (this). text ());
//});

// 5. Pre-bind. The event source of live is the source of documentdelegate, which is the specific element to be bound. Therefore, the efficiency of delegate is much higher than that of live.
$ ("# Main a"). live ("click", function (){
Alert ($ (this). text ());
});
});
</Script>