二级ul li元素动态加载click事件

一、代码

html代码：

<ul class="id1" id="id1" style="84%; height:75%;overflow:auto; margin-top: 0;font-size:15px;"></ul>

<ul class="id2" id="id2" style="84%; height:75%;overflow:auto; margin-top: 0;font-size:15px;"></ul>

js代码:

双击：dblclick

1. id1的ul绑定li，点击获取内容

方式一：

$("#id1").on("click", "li", function(e){
    alert($(this).html());
});

方式二：

$("#id1 li").each(function(i){
    $(this).click(function(){

        alert($(this).html());
        alert("第" + i + "被选中"); //从零计数
    });
});

方式三：

 $('<li></li>').text('内容').appendTo('#id1').addClass('clickable')
.click(function(){

　　alert($(this).html());

 })

.dblclick(function(){                   //双击

     alert($(this).html());

 })

2. 点击id1下的li添加id2下的li:　

$("#id1").on("click", "li", function(e){
    $('<li></li>').text(内容).appendTo(‘#id2’);
});

  

3. id1的ul绑定li，点击删除:

$("#id1").on("click", "li", function(e){
    this.parentNode.removeChild(this);
});

二、参考材料：

1.   二级ul li元素动态加载click事件
2. JavaScript中的事件代理（不太了解）