1. $(选择器).click(fn)
　　　　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

    $(function() {

        $('ul>li').click(function() {

            console.log($(this).html());

        });

        $('ul').append('<li>5</li><li>6</li>');

    })

    </script>

</body>

</html>

效果图：后面动态创建的5和6，没法进行点击事件触发。

2.$(选择器).on('click',function(){})

on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。

（支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是‘选择器’须是目标绑定元素的父元素）

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

    <script>

    $(function() {

        $('body').on('click', 'ul>li', function() {

            console.log($(this).html());

        });

        $('ul').append('<li>5</li><li>6</li>');

    })

    </script>

</body>

</html>

效果图：动态添加的元素也能被点击触发函数。

随机推荐

  1. 如何用keytool导入证书

    先用cmd定位到 jre\lib目录下的security文件夹   例如 C:\Program Files\Java\jre1.8.0_191\lib\security 运行cmd,导入证书 keyt ...

  2. 201671010140. 2016-2017-2 《Java程序设计》java学习第十四周

      java学习第十四周       本周,主要精力放在了第十二章swing用户界面组件知识的学习,swing是一个用于开发Java应用程序用户界面的开发工具包.它以抽象窗口工具包(AWT)为基础使跨 ...

  3. 【转】Pixel-Fillrate

    [Pixel-Fillrate] “填充率“以每秒钟填充的像素点为单位,“三角形(多边形)生成速度“则表示每秒钟三角形(多边形)生成个数.现在的3D显卡的性能也主要看着两项指标,这两项指标的数值越大, ...

  4. 【BZOJ 3261】最大异或和【可持久化字典树】

    题意 给出一个长度为n的整数序列,给出m个操作.操作有两种.1,Ax表示在序列结尾增加x.2,Qlrx表示找到一个位置p满足 l<=p<=r,使得a[p] xor a[p+1]xor... ...

  5. xdebug 一直报错 upstream timed out (110: Connection timed out) while reading response header from upstream

    本地主机(Windows环境192.168.66.1)访问虚拟机(192.168.66.139)里面的搭建的php环境(系统centos6.5版本,php版本是5.5.30 ,xdebug 2.4.0 ...

  6. Luogu 4238 【模板】多项式求逆

    疯狂补板中. 考虑倍增实现. 假设多项式只有一个常数项,直接对它逆元就可以了. 现在假如要求$G(x)$ $$F(x)G(x) \equiv 1 (\mod x^n)$$ 而我们已经求出了$H(x)$ ...

  7. code1169 传纸条

    来自:http://www.cnblogs.com/DSChan/p/4862019.html 题目说找来回两条不相交路径,其实也可以等价为从(1,1)到(n,m)的两条不相交路径. 如果是只找一条, ...

  8. Sprig 面试中 问及 ＤＩ，ＩＯＣ， ＡＯＰ

    面向切面编程,把散落在程序中的公共部分提取出来,做成切面类,这样的好处在于,代码的可重用,一旦涉及到该功能的需求发生变化,只要修改该代码就行,否则,你要到处修改,如果只要修改1.2处那还可以接受,万一 ...

  9. 51建设Android版一些技术整理

    不知不觉几个月就过去了,新项目已经发了两个大的版(其实已经迭代了3版),趁着项目新版刚刚上线闲下来的时间整理下用到的技术点. 整体架构 采用MVP Android官方MVP架构示例项目解析 推荐一个插 ...

  10. 编写高质量代码改善C#程序的157个建议——建议128：考虑让派生类的名字以基类名字作为后缀

    建议128:考虑让派生类的名字以基类名字作为后缀 派生类的名字可以考虑以基类名字作为后缀.这带来的好处是,从类型的名字上我们就知道它包含在哪一个继承体系中. Exception及其子类就是这样一个典型 ...