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);
});

运行结果:

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

要是用效果,就把 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 动态创建的元素,绑定事件无效之解决方法

运行结果:

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

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

规则如下:

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

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

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

上一篇:C#图解教程读书笔记(第8章 表达式和运算符)


下一篇:C#图解教程读书笔记(第15章 委托)