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" : "" ...
随机推荐
- POJ3666 Making the Grade [DP,离散化]
题目传送门 Making the Grade Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9090 Accepted: ...
- POJ3468 A Simple Problem with Interger [树状数组,差分]
题目传送门 A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 1 ...
- 洛谷P3385 [模板]负环 [SPFA]
题目传送门 题目描述 暴力枚举/SPFA/Bellman-ford/奇怪的贪心/超神搜索 输入输出格式 输入格式: 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个 ...
- PL\SQL结构控制、异常
PL\SQL结构控制 1.IF条件控制语句(三种基本方式+IF语句的嵌套使用) (1)IF... (2)IF...ELSE (3)IF...ELSIF. ...
- Flask实战第53天:cms编辑轮播图功能完成
后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...
- 【Java NIO】一文了解NIO
Java NIO 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后推出了新的IO系统(NIO),也可以理解为非阻塞IO(Non-Blocking ...
- 具有jQuery背景的程序员如何转换为AngularJS思考模式(译)
最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- [Atcoder Regular Contest 065] Tutorial
Link: ARC065 传送门 C: 最好采取逆序贪心,否则要多考虑好几种情况 (从前往后贪心的话不能无脑选“dreamer”,"er"可能为"erase"/ ...
- 2017 Multi-University Training 1 解题报告
Add More Zero Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...