一、代码

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中的事件代理(不太了解)

二级ul li元素动态加载click事件的更多相关文章

  1. 页面滚动图片等元素动态加载插件jquery.scrollLoading.js

    如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...

  2. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  3. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  4. JQuery不能加载click事件的问题

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  6. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

  7. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  8. 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  9. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

随机推荐

  1. VueJS参数绑定:v-bind:href,v-on:event

    参数绑定HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. tree related problems (update continuously)

    leetcode Binary Tree Level Order Traversal 这道题是要进行二叉树的层次遍历.对于层次遍历,最简单直观的办法就是进行BFS.于是我们仅仅须要维护一个队列就能够了 ...

  3. generate alphanumeric serial number

    generate alphanumeric serial number with the following BADI / Customer Exit: Name of Enhancement : I ...

  4. [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet

    [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet https://zhuanlan.zhihu.com/p/23480983 天清 9 个月前 写这 ...

  5. RestTemplate请求

    JSONObject json = new JSONObject(sendParam);HttpHeaders headers = new HttpHeaders();MediaType type = ...

  6. Sum It Up POJ 1564 HDU 杭电1258【DFS】

    Problem Description Given a specified total t and a list of n integers, find all distinct sums using ...

  7. 九度OJ 1139:最大子矩阵 (矩阵运算、缓存)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1014 解决:376 题目描述: 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩 ...

  8. fatal: parameter inet_interfaces: no local interface found for ::1

    https://codinfox.github.io/dev/2015/04/08/postfix-cannot-start/ Solution is straightforward: open /e ...

  9. build a real-time analytics dashboard to visualize the number of orders getting shipped every minute to improve the performance of their logistics for an e-commerce portal

    https://cloudxlab.com/blog/real-time-analytics-dashboard-with-apache-spark-kafka/

  10. 阿里Java开发手册学习 2 异常日志

    异常日志 异常处理 1.不要捕获继承自RuntimeException的运行时异常类,这类异常通常由程序员来校验,来保证查询的健壮性. 2. 不要对大段代码 try catch,分清稳定代码和非稳定代 ...