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

一、代码

html代码:

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

<ul class="id2" id="id2" style="width: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中的事件代理(不太了解)
上一篇:【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现


下一篇:最全的Android源码目录结构详解(转)