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. 译文：TypeScript新手指南

    你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  2. 给用户root权限

    1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户#passwd tommy   #passwd tommy //修改密 ...

  3. Go语言的基本类型转换-golang类型转换

    简单整理一下Golang的基本类型转换,作为备忘: 1.整形到字符串: var i int = 1 var s string 3.  s = strconv.Itoa(i) 或者 s = Format ...

  4. go_内建变量类型

    bool, string (u)int, (u)int8, (u)int16, (u)int32, (u)int64, uintptr (uintptr 是指针) byte, rune(表示字符cha ...

  5. linux系统文件属性详解

    一.文件信息 当创建一个文件的时候,系统保存了有关该文件的全部信息,包括: 文件的位置: 文件类型: 文件长度: 哪位用户拥有该文件,哪些用户可以访问该文件: 硬连接计数: 文件的修改时间: 文件的权 ...

  6. Qt Setting Application Icon

    Qt4 设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc ...

  7. IOS操作系统上执行monkey测试

    IOS操作系统上执行monkey测试 IOS操作系统不像Android系统那么方便,各种限制也比较多,目前我的建议还是直接在模拟器上执行monkey测试.如果需要在真机上面执行,可以参考文档: htt ...

  8. 实践作业3：白盒测试----了解JunitDAY9.

    我觉得整个白盒测试过程中,最大的难点就是学习Junit和使用它进行测试.我们组安排了两个同学一起完成这部分工作.因为这个工具之前从来没有接触过,因此需要从头开始自学.找到好的教程其实可以事半功倍,我找 ...

  9. Smarty的循环

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

  10. IO编程之writelines方法

    1.使用with open as 函数写入文件 2.创建后的文件名为database.txt 3.创建一个函数进行读取文件,使用for循环遍历整个文件内容 4.使用if __name__=='__ma ...