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