新元素之前的事件绑定无效（live方法）--事件委托

Posted 2020-08-06 websjs

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

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

 1 <ul>
 2     <button id="btn">creatEle</button>
 3     <li class="li">1111111111</li>
 4     <li class="li">1111111111</li>
 5     <li class="li">1111111111</li>
 6     <li class="li">1111111111</li>
 7 </ul>
 8     <script type="text/javascript">
 9         $(\'#btn\').on(\'click\' , function(){
10             $(\'ul\').append($(\'<li class="li">123456</li>\'))
11         })
12         $(\'.li\').on(\'mouseover\' ,function(){
13             $(this).css(\'background\' , \'#ff0\')
14         });
15         $(\'.li\').on(\'mouseout\' ,function(){
16             $(this).css(\'background\' , \'#ccc\')
17         });

已有元素事件绑定成功，

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

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

 1 <ul>
 2     <button id="btn">creatEle</button>
 3     <li class="li">1111111111</li>
 4     <li class="li">1111111111</li>
 5     <li class="li">1111111111</li>
 6     <li class="li">1111111111</li>
 7 </ul>
 8     <script type="text/javascript">
 9         $(\'#btn\').on(\'click\' , function(){
10             $(\'ul\').append($(\'<li class="li">123456</li>\'))
11         })
12         // $(\'.li\').on(\'mouseover\' ,function(){
13         //     $(this).css(\'background\' , \'#ff0\')
14         // });
15         // $(\'.li\').on(\'mouseout\' ,function(){
16         //     $(this).css(\'background\' , \'#ccc\')
17         // });
18         
19         $(\'ul\').on(\'mouseover\' ,function(event){
20             var event=event || window.event;
21             var target=event.srcElement || event.target;
22             if(target.nodeName.toLowerCase() == \'li\'){
23                 $(target).css(\'background\' , \'#ff0\')
24             }
25         })
26         $(\'ul\').on(\'mouseout\' ,function(event){
27             var event=event || window.event;
28             var target=event.srcElement || event.target;
29             if(target.nodeName.toLowerCase() == \'li\'){
30                 $(target).css(\'background\' , \'#ccc\')
31             }
32         })
33     </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(){
　　***
})