二级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 页 ...
随机推荐
- VueJS参数绑定:v-bind:href,v-on:event
参数绑定HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- tree related problems (update continuously)
leetcode Binary Tree Level Order Traversal 这道题是要进行二叉树的层次遍历.对于层次遍历,最简单直观的办法就是进行BFS.于是我们仅仅须要维护一个队列就能够了 ...
- generate alphanumeric serial number
generate alphanumeric serial number with the following BADI / Customer Exit: Name of Enhancement : I ...
- [框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet
[框架安装趟雷指南]Ubuntu+1060+cuda+cudnn+Keras+TH+TF+MXnet https://zhuanlan.zhihu.com/p/23480983 天清 9 个月前 写这 ...
- RestTemplate请求
JSONObject json = new JSONObject(sendParam);HttpHeaders headers = new HttpHeaders();MediaType type = ...
- 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 ...
- 九度OJ 1139:最大子矩阵 (矩阵运算、缓存)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1014 解决:376 题目描述: 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩 ...
- 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 ...
- 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/
- 阿里Java开发手册学习 2 异常日志
异常日志 异常处理 1.不要捕获继承自RuntimeException的运行时异常类,这类异常通常由程序员来校验,来保证查询的健壮性. 2. 不要对大段代码 try catch,分清稳定代码和非稳定代 ...