如何为新元素绑定事件 -live--- 事件委托

jq1.7之前 可以用live()；绑定事件 ，动态生成的标签也可以绑定上。

jq1.7之后live(),方法取消改为on()；但是动态生成的元素绑定不上事件了。

<ul>
    <button id="btn">creatEle</button>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
</ul>
    <script type="text/javascript">
        $('#btn').on('click' , function(){
            $('ul').append($('<li class="li">123456</li>'))
        })
        $('.li').on('mouseover' ,function(){
            $(this).css('background' , '#ff0')
        });
        $('.li').on('mouseout' ,function(){
            $(this).css('background' , '#ccc')
        });

已有元素事件绑定成功，

新创建元素事件没有绑定上。

下面介绍一种事件委托的方法，给父元素绑定事件。

<ul>
    <button id="btn">creatEle</button>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
    <li class="li">1111111111</li>
</ul>
    <script type="text/javascript">
        $('#btn').on('click' , function(){
            $('ul').append($('<li class="li">123456</li>'))
        })
        // $('.li').on('mouseover' ,function(){
        //     $(this).css('background' , '#ff0')
        // });
        // $('.li').on('mouseout' ,function(){
        //     $(this).css('background' , '#ccc')
        // });
        
        $('ul').on('mouseover' ,function(event){
            var event=event || window.event;
            var target=event.srcElement || event.target;
            if(target.nodeName.toLowerCase() == 'li'){
                $(target).css('background' , '#ff0')
            }
        })
        $('ul').on('mouseout' ,function(event){
            var event=event || window.event;
            var target=event.srcElement || event.target;
            if(target.nodeName.toLowerCase() == 'li'){
                $(target).css('background' , '#ccc')
            }
        })
    </script>

var event=event || window.event;
var target=event.srcElement || event.target;

IE与FF的兼容。

新元素也有了效果。

父元素一直是存在的，父元素的事件绑定也没问题，通过事件委托找到事件对象target元素，操作target元素。

对于li来说 是先有的事件，然后是事件找到元素。

而之前的on()事件绑定是先有的元素，然后有事件。

对于动态创建的元素来说，js加载完成后执行绑定，而动态创建元素还没有出现（先有的元素还没有），自然绑定不上事件。

jq的delegate事件实现新元素的事件绑定

$('ul').delegate('li','click',function(){
　　***
})