请问javascript中：比如li中针对每一个li有一个事件绑定，另外有一个button事件可以增加li

问题是为什么我新增加的li上面没有事件发生。
而如果我把li上的事件绑定写成一个函数，在button事件内增加这个函数，又会发生原来就有的li上事件发生多次?
请问这种一般怎么解决呢？
一个人学习的环境遇到点问题就没办法了，希望有人给出建设性的意见JavaScript

解决方案 »

  1.   

    没有看懂你的buttom与li之间的关系，最好把你的代码贴出来
      

  2.   

    最简单的办法就是让li的绑定方法代码在动态添加li的代码后面执行，以前也出现过这样的问题，原因就是事件绑定的时候没有给后面动态添加的元素绑定上，而采用你的方法（动态添加完了再一次绑定）的话，就会出现你的问题了（原有的元素事件多次调用），解决的办法就是在动态添加li的时候，将事件的调用一并添加进去就可以了。
      

  3.   

    这里有个小技巧,就是把事件绑定在父元素上面,一般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>
      

  4.   


    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);
            }
        }
        var button = document.getElementById('add');
        button.onclick = function(){
            var li = document.createElement('li');
            var str = 'li'+(new Date()).getTime();
            li.id = str;
            li.innerHTML = str;
            li.onclick = function(ev){
                ev = ev || window.event;
                action.call(this,ev);
            }
            ul.appendChild(li);
        }
    }<ul id="ul">
        <li id="li1111">1111</li>
        <li id="li2222">2222</li>
        <li id="li3333">3333</li>
    </ul>
    <input id="add" value="添加" type="button" />
      

  5.   

    那请问在这个基础上如果li上没有事件，但每个li里面有二三个事件，新添加的li也会发生这二三个事件.应该怎么处理？麻烦说下思路或在这个基础上改个实例?由z谢谢了
      

  6.   


    添加个标记就可以了
    <!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;
    }

    // 没有事件
    if(target.getAttribute('noEvent')) {
    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 = '有事件 ' + (i++);
    document.getElementById('ul').appendChild(li);
    }// 添加无事件的LI
    function addLI_noEvent(){
    var li = document.createElement('li');
    li.innerHTML = '无事件 ' + (i++);
    // 做个标记
    li.setAttribute('noEvent',true);
    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()">
    <INPUT TYPE="button" VALUE="添加LI(无事件)" ONCLICK="addLI_noEvent()">
    </BODY>
    </HTML>
      

  7.   

    解决的办法就是在动态添加li的时候，将事件的调用一并添加进去就可以了
    这个解决办法：将事件的调用一并添加进去的可以写成一个函数，然后添加li时再调用一次，可是如果涉及到this问题，这个函数就没法在两个地方使用了。不知不重复性的写事件的调用语句。不知道你明白没明白我的疑问。
      

  8.   

    那请问在这个基础上如果li上没有事件，但每个li里面有二三个事件，新添加的li也会发生这二三个事件.应该怎么处理？麻烦说下思路或在这个基础上改个实例?由z谢谢了其实我问的是这些li上本来没有事件，但li里面有三个a元素上面有各自的事件，button添加li后，这里面的li也会有三个a上的事件。
    虽然回答并非所问，但提供了很好的思路，谢谢。
      

  9.   


    function Li_BindEvent()//li绑定的事件
        {
            //......
        }
        function addLI(){
            var li = document.createElement('li');
            li.innerHTML = '有事件 ' + (i++);
            li.setAttribute("onclick","Li_BindEvent()");
            document.getElementById('ul').appendChild(li);
        }我的意思是这样绑定，这样就不会存在重复调用的问题