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. Makefile里面打印信息

    Makefile的规则相对来说还是比较复杂的,上手不容易,没有系统研究过,往往搞不清楚状况.如果掌握了基本的调试手段,那对我们写出正确的Makefile会非常有帮助.而在Makefile中,最重要的调 ...

  2. 求Half向量

    [求Half向量] 给定入射向量与视角向量.把入射向量与视角向量相加即可,如下: 前提是 lightDir.ViewDir 都是单位向量.

  3. 使用vue-cli创建一个vue项目

    安装vue-cli npm install -g @vue/cli 1, 使用vue创建一个项目 vue create luffy 2, 安装所需的插件 npm install vue-router ...

  4. yum基本用法与修改源

    一.yum简介 yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(y ...

  5. 汉诺塔（hanoi）

    汉诺塔代码: def hanoi(n,x,y,z): if n == 1: print(x,'-->',z) else: hanoi(n-1,x,z,y) print(x,'-->',z) ...

  6. Spring Boot☞ 使用velocity渲染web视图

    效果图: 代码 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF ...

  7. java中的集合类总结

    在使用Java的时候,我们都会遇到使用集合(Collection)的时候,但是Java API提供了多种集合的实现,我在使用和面试的时候频 频遇到这样的“抉择” . :)(主要还是面试的时候) 久而久 ...

  8. ArcGIS中地图导出格式比较（转）

    转自:http://blog.sina.com.cn/s/blog_6438c8360101eqfx.html   有人问过这样的问题,用于出挂图的地图格式应该怎么选择?熟悉ArcGIS的用户都知道, ...

  9. ceph修复osd为down的情况

    尝试一.直接重新激活所有osd 1.查看osd树 root@ceph01:~# ceph osd tree ID WEIGHT TYPE NAME UP/DOWN REWEIGHT PRIMARY-A ...

  10. k8s启动Pod遇到CrashLoopBackOff的解决方法

    1.用kubectl get pod 当看到上面的状态后执行第2步 2.查看pod详情 [root@cc hzb]# kubectl describe pod ceph-mysql-hzb-pod 找 ...