Home > Developer > JavaScript
<! Doctype html>
<Html> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> event DeleGate </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var I = 1;
$ (". Add"). click (function (){
I ++;
Var li = $ (". all li: first "). clone (). children ("input "). attr ("class", "btn" + I ). siblings ("em "). text (I ). parent ();
$ (". All ul"). append (li );
});
$ (". Btn2"). bind ("click", function (){
$ (This). next (). show ();
});
$ (". Btn3"). live ("click", function (){
$ (This). next (). show ();
});
$ (". All"). delegate (". btn5", "click", function (){
$ (This). next (). show ();
});
$ (". Btn6"). on ("click", function (){
$ (This). next (). show ();
});
$ (". All"). on ("click", ". btn7", function (){
$ (This). next (). show ();
});
});
(Function ($ ){
$ (". All. btn4"). live ("click", function (){
$ (This). next (). show ();
});
}) (JQuery );
</Script>
<Style>
. All {width: 800px; margin: 50px auto ;}
. All ul {padding: 20px; border: 1px solid #000; list-style: none ;}
. All li {margin: 0 0 10px; width: 200px; height: 24px; overflow: auto; zoom: 1; list-style: none ;}
. All li input {float: left ;}
. All li span {display: none; float: left; margin: 0 0 0 5px; font: 12px/24px "microsoft yahei"; color: #069 ;}
. All li em {float: left; margin: 0 10px 0 0; font: 12px/24px "microsoft yahei"; color: # c00 ;}
</Style>
</Head>
<Body>
<Div class = "all">
<Input type = "button" class = "add" value = "add something"/>
<P> the first has no effect, the second bind, the third live, the fourth live, the fifth delegate, and the sixth on bind effect, 7. on live effect </p>
<Ul>
<Li> <em> 1 </em> <input type = "button" value = "Click me! "Class =" btn1 "/> <span> you clicked the button </span> </li>
</Ul>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
