jquery 动态创建的元素，绑定事件无效之解决方法

 今天遇到一个问题，动态创建的元素，绑定事件无效，如下：

js 代码如下：

 var OaddX = $('.detright div.duibi div.duibox ul li span');  // 所有的X;
 var Ojiaru = $('.detright div.duibi div.duibox div.tiao li button'); // 添加新车对比按钮
 OaddX.on('click',function(){
           var OspanX =  $('.detright div.duibi div.duibox ul li span');
           if(OspanX.length<2){
               Oduicon.css('display','none');
           };
           $(this).parent().remove();
       });
 Ojiaru.on('click',function(){
            var OaddX1 = $('.detright div.duibi div.duibox ul li span'); 
            if(OaddX1.length>3){return false;}
            var Oul1 = $('.detright div.duibi div.duibox ul');
            var Ojianei = $('.detright div.duibi div.duibox div.tiao li.titles');
            var str = "<span class='dui_guan'>X</span>";
                str += "<a href='javascript:;'>" + $.trim( Ojianei.html() ) + "</a>";
            var li1 = $('<li></li>');
            li1.append(str);
            Oul1.append(li1);
       });

运行结果：

要是用效果，就把 OaddX 的点击事件重新写，改成如下：

var OaddX = $('.detright div.duibi div.duibox ul li span');  // 所有的X;
var Ojiaru = $('.detright div.duibi div.duibox div.tiao li button'); // 添加新车对比按钮
$("body").on('click','.detright div.duibi div.duibox ul li span',function(){
            var OspanX =  $('.detright div.duibi div.duibox ul li span');
           if(OspanX.length<2){
               Oduicon.css('display','none');
           };
           $(this).parent().remove();
        });
Ojiaru.on('click',function(){
            var OaddX1 = $('.detright div.duibi div.duibox ul li span'); 
            if(OaddX1.length>3){return false;}
            var Oul1 = $('.detright div.duibi div.duibox ul');
            var Ojianei = $('.detright div.duibi div.duibox div.tiao li.titles');
            var str = "<span class='dui_guan'>X</span>";
                str += "<a href='javascript:;'>" + $.trim( Ojianei.html() ) + "</a>";
            var li1 = $('<li></li>');
            li1.append(str);
            Oul1.append(li1);
       });

代码 差异如下：

 

运行结果：

 

在 jquery中，如果需要进行动态添加元素，并且添加的元素要具有动态绑定事件的效果，那么可以把元素的绑定事件交给父元素或者body元素来实现

规则如下：

1. $('body').on('click','未来要添加的元素'，function(){  .....  }) ;

2. '父元素'.on('click','未来要添加的元素'，function(){  .....  }) ;

 

在jquery中，个人感觉比较方便，不用再去自己写js原生的 委托事件 来进行动态绑定