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. My97DatePicker日期控件的使用

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

  2. 新做的系统，第一次拉maven项目时，鼠标左键+ctrl键不能进方法

    对项目选择属性,跳转至:选择以下步骤

  3. GRUB使用说明

    从Red Hat Linux 7.2起,GRUB(GRand Unified Bootloader)取代LILO成为了默认的启动装载程序.相信LILO对于大家来说都是很熟悉的.这次Red Hat Li ...

  4. Mybatis：传入参数方式以及#{}与${}的区别

    一.在MyBatis的select.insert.update.delete这些元素中都提到了parameterType这个属性.MyBatis现在可以使用的parameterType有基本数据类型和 ...

  5. 001 KNN分类 最邻近算法

    1.文件5.0,3.5,1.6,0.6,apple5.1,3.8,1.9,0.4,apple4.8,3.0,1.4,0.3,apple5.1,3.8,1.6,0.2,apple4.6,3.2,1.4, ...

  6. [GO]panic的应用

    对于异常的处理,error表示的是不太致使的错误,但是如果遇到数组越界或者是空指针这种会导致程序崩溃无法恢复的错误时,就需要使用以panic了 我们不应该使用panic去报error的错误,而是只使用 ...

  7. Redis实现高并发下的抢购、秒杀功能

    博主最近在项目中遇到了抢购问题!现在分享下.抢购.秒杀是如今很常见的一个应用场景,主要需要解决的问题有两个:1 高并发对数据库产生的压力2 竞争状态下如何解决库存的正确减少("超卖" ...

  8. mysql数据库引擎MyISAM与InnoDB的区别浅说

    mysql的存储引擎包括:MyISAM.InnoDB.BDB.MEMORY.MERGE.EXAMPLE.NDBCluster.ARCHIVE.CSV.BLACKHOLE.FEDERATED等,其中In ...

  9. 更改oracle数据库字符集

    A.oracle server 端 字符集查询  select userenv('language') from dual 其中NLS_CHARACTERSET 为server端字符集 NLS_LAN ...

  10. O_DIRECT方式读取文件示例

    #include <fcntl.h> #include <stdio.h> #include <stdlib.h> #include <sys/stat.h& ...