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. spring jpa 创建时间和更新时间自动更新

    @Entity @Table(name="RS_SIGNUPUSER") public class RsSignUpUser { @Id @GenericGenerator(nam ...

  2. $(window).load()和$(document).ready()

    一.前言 我们在编写前端代码的js文件时,往往是会先写一个$(function(){}),然后才会在大括号里面继续写我们自己的代码.当时并不能理解为什么要添加这样一个东西,只是把它当做一个标签一样添加 ...

  3. 使用 XML-RPC 为 C++ 应用程序启用 Web 服务

    http://www.ibm.com/developerworks/cn/webservices/ws-xml-rpc/ 引言 Internet 现在的受欢迎程度越来越高,由于这个原因及其固有的优势, ...

  4. highchart 曲线图

    $(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Char ...

  5. Jedis连接Redis三种模式

    这里说的三种工作模式是指: 1.单机模式 2.分片模式 3.集群模式(since 3.0) 说明图详见以下: 使用单机模式连接: private String addr="192.168.1 ...

  6. HUST数媒1501班第2周作业成绩公布

    说明 本次公布的成绩对应的作业为: 第2周个人作业:WordCount编码和测试 如果同学对作业成绩存在异议,在成绩公布的72小时内(截止日期4月26日0点)可以进行申诉,方式如下: 毕博平台的第二周 ...

  7. BBS项目之后台管理

    一:后台管理,添加文章样式编写 创建 一个后台管理模板前段页面 <!DOCTYPE html> <html lang="en"> <head> ...

  8. centos7设置、查看、删除环境变量的方法

    centos查看环境变量与设置环境变量在使用过程中很常见,本文整理了一些常用的与环境变量相关的命令,感兴趣的朋友可以参考下希望对你有所帮助 1. 显示环境变量HOME(红色部分代表要输入的命令,不要把 ...

  9. [GO]字符串的使用

    package main import ( "fmt" "strings" ) func main() { //判断字符串1是否包含字符串2,如果包含则返回tr ...

  10. ngix 创建新的网站

    1. 进入ngix 的目录的conf 目录 的 vhosts 2. 复制一份新的v2.edc.com.conf 3. server_name : v2.edc.com root :  /ali/... ...