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<){
                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<){
                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原生的 委托事件 来进行动态绑定