转自: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失效问题的更多相关文章

  1. jquery - ul li click 无响应

    搞了很久, 发现对应jquery来说, 动态产生的ul li(其实不只是这个, 还有 table td等), 直接使用 $("#ul_div>li").click(funct ...

  2. jquery绑定事件失效的情况(转)

    原文地址:http://www.thinksaas.cn/group/topic/348453/ jQuery中文api地址:http://www.jquery123.com/api/ jQuery官 ...

  3. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  4. vue li click

    <ul>      <li @click="mechanisms(1)">AAAAA</li>      <li @click=" ...

  5. 2.26 js解决click失效问题

    2.26 js解决click失效问题 前言有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了.本篇用2种方法解决这种诡 ...

  6. 关于jquery的click()方法

    昨天,有个同事研究了以下jqury的click()方法,代码如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. jquery 自定义click事件执行多次

    用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...

  8. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  9. jquery <li>标签 隔若干行 加空白或者加虚线

    $(function () { $('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : "" ...

随机推荐

  1. POJ3666 Making the Grade [DP,离散化]

    题目传送门 Making the Grade Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9090   Accepted: ...

  2. POJ3468 A Simple Problem with Interger [树状数组,差分]

    题目传送门 A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 1 ...

  3. 洛谷P3385 [模板]负环 [SPFA]

    题目传送门 题目描述 暴力枚举/SPFA/Bellman-ford/奇怪的贪心/超神搜索 输入输出格式 输入格式: 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个 ...

  4. PL\SQL结构控制、异常

    PL\SQL结构控制    1.IF条件控制语句(三种基本方式+IF语句的嵌套使用)        (1)IF...        (2)IF...ELSE        (3)IF...ELSIF. ...

  5. Flask实战第53天:cms编辑轮播图功能完成

    后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...

  6. 【Java NIO】一文了解NIO

    Java NIO 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后推出了新的IO系统(NIO),也可以理解为非阻塞IO(Non-Blocking ...

  7. 具有jQuery背景的程序员如何转换为AngularJS思考模式(译)

    最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...

  8. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  9. [Atcoder Regular Contest 065] Tutorial

    Link: ARC065 传送门 C: 最好采取逆序贪心,否则要多考虑好几种情况 (从前往后贪心的话不能无脑选“dreamer”,"er"可能为"erase"/ ...

  10. 2017 Multi-University Training 1 解题报告

    Add More Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...