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. 如何在windows下安装mongoDB扩展

    安装环境   系统环境:Windows 10 64位   Apache版本:2.4.9   PHP版本:5.5.12   MongoDB版本:3.2.6   Wamp版本:wamp 2.5 86位   ...

  2. My97DatePicker日期控件的使用

    本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项 ...

  3. 【Todo】Linux进程调度算法学习

    参考这篇文章 http://blog.chinaunix.net/uid-27052262-id-3239260.html Linux支持三种进程调度策略,分别是SCHED_FIFO . SCHED_ ...

  4. java程序员应该熟悉的20个有用的库(转)

    优秀且经验丰富的Java开发人员的一个特点是API的广泛知识,包括JDK和第三方库.我花了很多时间学习API,特别是在阅读Effective Java 3rd Edition之后,Joshua Blo ...

  5. java反射对实体类取值和赋值，可以写成通过实体类获取其他元素的数据，很方便哦~~~

    项目中需要过滤前面表单页面中传过来的实体类的中的String类型变量的前后空格过滤,由于前几天看过一个其他技术博客的的java反射讲解,非常受益.于是,哈哈哈 public static <T& ...

  6. Hibernate多对多操作

    ---------------------siwuxie095 Hibernate 多对多操作 以用户和角色为例 (一)多对多映射配置 第一步:创建两个实体类,用户和角色 第二步:让两个实体类之间互相 ...

  7. 关于IOS新手在安装cocoa pods失败,因为ruby版本过低的解决方法+ (void) {升级ruby}

    http://blog.csdn.net/zhaoen95/article/details/51995520     现在: 使用 OS 系统, 正在学习iOS 需要配置cocoapods 命令行中显 ...

  8. eclipse 使用 scons 编译的配置说明

    eclipse版本: eclipse-cpp-kepler-SR1-win32.zip 创建项目必须选择“Makefile Project” 然后进入“Projects  Properities” 先 ...

  9. CENTOS7 YUM安装BOOST1.53（静态版本）

    按照之前的博文更新163的源之后,执行: yum install boost-static.i686 yum install boost-devel.i686 yum install boost-do ...

  10. Smarty的循环

    (1)section.sectionelse功能多,参数多.或许不是太实用.是smarty用来做循环操作的函数之一.(2)了解基本属性name和loop <section name=articl ...