今天遇到一个问题，动态创建的元素，绑定事件无效，如下：
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原生的 委托事件 来进行动态绑定