JQuery event delegate event broker

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>delegate_代表</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $('.list li').click(function(){
            //     $ (the this) .css ({ 'the backgroundColor': 'Plum'},) 
            // }) 
            // // conventional writing, this method, when executed, is to the eight current li sequentially binding statement after adding a new condition when no longer bound. 

            // var $ li = $ ( '<li>. 9 </ li>'); 
            // // create a new variable, is assigned to the variable li. 
            @ $ ( 'List.') the append ($ li);. 
            // . // the variable liappend to ul tag inside, the added new elements of the operation 

            // // use the wording before it, on the one hand and the number of elements need to bind number of times equal, poor performance and, after the newly added elements of the pattern can not be used. 

            $ ( ' .list ' ) .delegate ( ' Li ' , ' the Click ' , function () { 
                $ ( the this ) .css ({ 'backgroundColor': ' Red ' ,}) 
            }) 

            var $ Li = $ ( ' <Li>. 9 </ Li> ' ); 
            $ ( ' .list ' ) .append ($ Li); 

            // where the new element may also be used the style. 

            // On the one hand is to enhance the performance, one is adding a new child element can also enjoy the style, reducing the amount of code. 
            // so, when operating style, multi-use event proxy (delegate) 
        })         

    </ Script > 
    < style type = "text / CSS" > 
        .list { 
            width : 100% ; 
            background : Tan;
            list-style: none;
            padding: 5px;
        }
        .list li{
            height: 30px;
            background: lime;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
JQuery event delegate event broker

Guess you like
