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. Linux实战教学笔记39：Mha-Atlas-MySQL高可用方案实践（一）

    一,mysql-mha环境准备 1.1 实验环境: 主机名 IP地址(NAT) 描述 mysql-db01 eth0:192.168.0.51 系统:CentOS6.5(6.x都可以) 安装:mysq ...

  2. FastDFS 分布式文件系统

    1       学习目标 了解项目中使用FastDFS的原因和意义. 掌握FastDFS的架构组成部分,能说出tracker和storage的作用. 了解FastDFS+nginx上传和下载的执行流程 ...

  3. linux fg&bg

    [linux fg&bg] Linux 提供了 fg 和 bg 命令,让我们调度正在运行的任务. 假设你发现前台运行的一个程序需要很长的时间,但是需要干其他的事情,你就可以用 Ctrl-Z , ...

  4. 【UVA11212 算法竞赛入门经典】 Editing a Book 【IDA*】

    题意 你有一篇由n(2<=n<=9)个自然段组成的文章,希望将它们排列成1,2,···,n.可以用剪切和粘贴来完成任务.每次可以剪切一段连续的自然段,粘贴时按照顺序粘贴.注意剪贴板只有一个 ...

  5. 前向渲染路径细节 Forward Rendering Path Details

    正向渲染路径细节 Forward Rendering Path Details Forward Rendering path renders each object in one or more pa ...

  6. python中函数作用域

    在python中,一个函数就是一个作用域 name = 'xiaoyafei' def change_name(): name = 'sthu' print('在change_name里的name:' ...

  7. cs api测试

    更新磁盘方案 http://192.168.150.16:8900/client/api?command=updateDiskOffering&id=199e3be4-2af1-47a3-9f ...

  8. 数据分析sql常用整理

    [SQL 数据分析常用语句] 2017-07-20 00:00 数据分析 来源:datakong 转自:大数据 • 1 基础查询 • 2 字符串数字日期时间 • 3 聚合数据查询 • 4 子查询 • ...

  9. Perl 学习笔记－正则表达式应用篇

    1.以 m// 进行匹配 如:  m/roger/ ,  /roger/ 是它的简写;  在说明  qw// 时可以选择使用任何成对的定界符, 对应m//匹配也可以, 如写成:  m(roger)   ...

  10. 4.4.1 CAS详解

    一.什么是CAS CAS,compare and swap的缩写,中文翻译成比较并交换. 我们都知道,在java语言之前,并发就已经广泛存在并在服务器领域得到了大量的应用.所以硬件厂商老早就在芯片中加 ...