二级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);
});
二、参考材料:
二级ul li元素动态加载click事件的更多相关文章
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的 ...
- [转]jQuery页面滚动图片等元素动态加载实现
本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...
- jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
- JQuery不能加载click事件的问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
- js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
随机推荐
- 我的Android进阶之旅------>Android中android:windowSoftInputMode的使用方法
面试题:怎样在显示某个Activity时马上弹出软键盘? 答案:在AndroidManifest.xml文件里设置<activity>标签的android:windowSoftInputM ...
- Flash文字效果
flash中增加文本.使用了消除锯齿:可读性消除锯齿.发现不嵌入字体的无法动态改动里面的文字,但嵌入字体的话会造成swf文件过大. 终于还是选择了使用设备字体,并选择了黑体.出了一个问题.文字没有加粗 ...
- Java中的class类的cast方法和asSubclass方法
一般来说cast是转型的意思,但是学java的时间也不短了,class类居然还有cast这个方法,这里来学习一下这个cast有何用. 第一次看到这个cast是在Spring的源码中, spring-f ...
- Scrapy爬虫入门系列2 示例教程
本来想爬下http://www.alexa.com/topsites/countries/CN 总排名的,但是收费了 只爬了50条数据: response.xpath('//div[@class=&q ...
- Hadoop集群_HDFS初探之旅
1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开 ...
- 解决Linq.ToDictionary()时的键重复问题
今天在使用 Linq 的 ToDictionary() 时发生了异常,提示: System.ArgumentException: 已添加了具有相同键 因为以前一直没有遇到有相同键的情况,所以从来没关注 ...
- Android 一键清理动画
版本号:1.0 日期:2014.7.29 2014.7.30 版权:© 2014 kince 转载注明出处 一键清理是非常多Launcher都会带有的功能,其效果也比較美观.实现方式或许有非常多 ...
- easyui datagrid 加载静态文件中的json数据
本文主要介绍easyui datagrid 怎么加载静态文件里的json数据,开发环境vs2012, 一.json文件所处的位置 二.json文件内容 {"total":28,&q ...
- Thread join方法的用途
主线程中会创建多个子线程做一些事情,主线程要用到这些子线程处理的数据,因此它需要等待所有的子线程处理完之后才继续运行.这就要用到join方法了.
- 时间操作(Java版)—获取给定日期N天后的日期
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/34896777 获取给定 ...