jQuery li click失效问题
转自:http://blog.sina.com.cn/s/blog_64008ed70101nyoz.html
项目中使用到jQuery脚本插入一段代码,然后给代码加事件,但是click事件失效,网上找原因说是jQuery只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.
代码如下:
<div class="hotel_info_pic" id="imgDiv">
<ul id="imgUl"> </ul>
</div>
<div id="alertDiv" style="display:none;">
<p>测试文字</p>
</div> <script type="text/javascript">
$(document).ready(function(){
var temp="<li>111</li><li>222</li><li>333</li>";
$("#imgUl").append(temp);
$("#imgDiv ul li").click(function(){
$("#alertDiv").show();
});
});
</script>
点击li没有任何反应,然后改成live,一切OK.
<script type="text/javascript">
$(document).ready(function(){
var temp="<li>111</li><li>222</li><li>333</li>";
$("#imgUl").append(temp);
$("#imgDiv ul li").live('click',function(){
$("#alertDiv").show();
});
});
</script>
jQuery li click失效问题的更多相关文章
- jquery - ul li click 无响应
搞了很久, 发现对应jquery来说, 动态产生的ul li(其实不只是这个, 还有 table td等), 直接使用 $("#ul_div>li").click(funct ...
- jquery绑定事件失效的情况(转)
原文地址:http://www.thinksaas.cn/group/topic/348453/ jQuery中文api地址:http://www.jquery123.com/api/ jQuery官 ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- vue li click
<ul> <li @click="mechanisms(1)">AAAAA</li> <li @click=" ...
- 2.26 js解决click失效问题
2.26 js解决click失效问题 前言有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了.本篇用2种方法解决这种诡 ...
- 关于jquery的click()方法
昨天,有个同事研究了以下jqury的click()方法,代码如下: <!DOCTYPE html> <html> <head> <meta charset=& ...
- jquery 自定义click事件执行多次
用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- jquery <li>标签 隔若干行 加空白或者加虚线
$(function () { $('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : "" ...
随机推荐
- SpringBoot学习:整合Mybatis,使用HikariCP超高性能数据源
一.添加pom依赖jar包: <!--整合mybatis--> <dependency> <groupId>org.mybatis.spring.boot</ ...
- react native android 上传文件,Nodejs服务端获取上传的文件
React Native端 使用react-native-image-picker 做出选择图片的操作,选择完成后,直接将图片Post至服务器,保存在服务器的某个地方(保存图片的路径需要公开显示),并 ...
- Java九大内置对象
Java九大内置对象 内置对象/作用域(每一种作用域的生命周期是不一样的): 1, application 全局作用域 2, session 会话作用域 ...
- 【前端必备】一、HTML篇
1.文档类型是什么概念,起什么作用? <!DOCTYPE> 声明此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 该标签可声明三种 DTD 类型,分别表示严格版本 ...
- matlab学习之绘制参数曲线,添加辅助线以及颜色设置
粘贴代码 % 插入参数曲线h % 插入辅助线h1 % 并设置颜色,包括画布颜色和曲线颜色 t=-pi:0.1:pi; x=cos(t)-sin(3*t); y=sin(t).*cos(t)-cos(3 ...
- 【带权并查集】Gym - 100923H - Por Costel and the Match
裸题. 看之前的模版讲解吧,这里不再赘述了. #include<cstdio> #include<cstring> using namespace std; int fa[10 ...
- 【Kruskal+dfs】BZOJ1016- [JSOI2008]最小生成树计数
[题目大意] 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树. [思路] 拖欠了三个月整(?)的题目,搞出来弄掉了……本年度写的时候姿势最丑 ...
- 20162307 实验三 敏捷开发与XP实践
实验三 <敏捷开发与XP实践> 北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623 姓名:张韵琪 学号:20162307 指导教师:娄佳鹏老师.王志强 ...
- 十一. 图形、图像与多媒体5.Graphics2D类的绘图方法
Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...
- Educational Codeforces Round 6 D. Professor GukiZ and Two Arrays 二分
D. Professor GukiZ and Two Arrays 题目连接: http://www.codeforces.com/contest/620/problem/D Description ...