请教javascript中：比如li中针对每一个li有一个事件绑定，另外有一个button事件可以增加li
日期：2014-05-16 浏览次数：20347 次
请问javascript中：比如li中针对每一个li有一个事件绑定，另外有一个button事件可以增加li
问题是为什么我新增加的li上面没有事件发生。
而如果我把li上的事件绑定写成一个函数，在button事件内增加这个函数，又会发生原来就有的li上事件发生多次?
请问这种一般怎么解决呢？
一个人学习的环境遇到点问题就没办法了，希望有人给出建设性的意见
------解决方案--------------------
最简单的办法就是让li的绑定方法代码在动态添加li的代码后面执行，以前也出现过这样的问题，原因就是事件绑定的时候没有给后面动态添加的元素绑定上，而采用你的方法（动态添加完了再一次绑定）的话，就会出现你的问题了（原有的元素事件多次调用），解决的办法就是在动态添加li的时候，将事件的调用一并添加进去就可以了。
------解决方案--------------------
这里有个小技巧,就是把事件绑定在父元素上面,一般LI的父元素是UL
然后根据事件的向上冒泡原理,只要在父元素上绑定事件,然后判断事件是否是从子节点传递过来的就可以了
------解决方案--------------------
意见就是学习时间在加倍
------解决方案--------------------
问题是为什么我新增加的li上面没有事件发生。
而如果我把li上的事件绑定写成一个函数，在button事件内增加这个函数，又会发生原来就有的li上事件发生多次?
请问这种一般怎么解决呢？
一个人学习的环境遇到点问题就没办法了，希望有人给出建设性的意见
JavaScript
------解决方案--------------------
最简单的办法就是让li的绑定方法代码在动态添加li的代码后面执行，以前也出现过这样的问题，原因就是事件绑定的时候没有给后面动态添加的元素绑定上，而采用你的方法（动态添加完了再一次绑定）的话，就会出现你的问题了（原有的元素事件多次调用），解决的办法就是在动态添加li的时候，将事件的调用一并添加进去就可以了。
------解决方案--------------------
这里有个小技巧,就是把事件绑定在父元素上面,一般LI的父元素是UL
然后根据事件的向上冒泡原理,只要在父元素上绑定事件,然后判断事件是否是从子节点传递过来的就可以了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE> New Document </TITLE>
<script type="text/javascript">
window.onload = function() {
document.getElementById('ul').onclick = function(e) {
e = e
------解决方案--------------------
window.event;
var target = e.target
------解决方案--------------------
e.srcElement;
// 不是<li>标签就返回
if(target.nodeName !== 'LI') {
return;
}
//
func(target.innerHTML);
// 阻止默认行为并取消冒泡
// 阻止打开连接
if(typeof e.preventDefault === 'function') {
e.preventDefault();
e.stopPropagation();
}else {
e.returnValue = false;
e.cancelBubble = true;
}
}
}
var i=0;
function addLI(){
var li = document.createElement('li');
li.innerHTML = 'new Li ' + (i++);
document.getElementById('ul').appendChild(li);
}
function func(s) {
alert(s)
}
</script>
</HEAD>
<BODY>
<ul id="ul">
<li>百度</li>
<li>谷歌</li>
</ul>
<INPUT TYPE="button" VALUE="添加LI" ONCLICK="addLI()">
</BODY>
</HTML>
------解决方案--------------------
意见就是学习时间在加倍
------解决方案--------------------
function action(ev){
console.log(this.id);
}
window.onload = function(){
var ul = document.getElementById('ul');
var lis = ul.getElementsByTagName('li');
var len = lis.length;
for(var i=0;i<len;i++){
lis[i].onclick = function(ev){
ev = ev
------解决方案--------------------
window.event;
action.call(this);
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
