<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input id="val" type="text" />

<input id="add" type="button" value="添加" />

<div>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    $('#add').click(function () {

        var tag = document.createElement('li');

        var v = $('#val').val();

        $(tag).text(v);

        $('ul').append(tag);

    });

//    //第一种常见绑定方式，也是最常用的

//    $('li').click(function () {

//        alert($(this).text());

//    });

//    //第二种绑定方式 bind有与之对应的unbind

//    $('li').bind('click',function () {

//        alert($(this).text());

//    });

    //第三种绑定方式,功能很强大，可以让之后新添加的标签也有单击事件

    $('ul').delegate('li','click',function () {

        alert($(this).text());

    });

//   //第四种绑定方式 on 其实以上三种方式都是通过包装on实现的

//    $('li').on('click',function () {

//        alert($(this).text());

//    });

</script>

</body>

</html>

　　

jQuery 事件绑定四种方式，delegate委托强大绑定在3.0中修改为on的更多相关文章

  1. jQuery绑定事件的四种方式：bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  2. android点击事件的四种方式

    android点击事件的四种方式 第一种方式:创建内部类实现点击事件 代码如下: package com.example.dail; import android.text.TextUtils; im ...

  3. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  4. jQuery绑定事件的四种方式区别

    jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...

  5. ASP.NET MVC之下拉框绑定四种方式（十）

    前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...

  6. SWT组件添加事件的四种方式

    在我们CS日常开发过程中会经常去为组件添加事件,我们常用的为AWT与SWT.SWT的事件模型是和标准的AWT基本一样的.下面将按照事件的四种写法来实现它. 一.匿名内部类的写法 new MouseAd ...

  7. Java添加事件的四种方式

    Java添加事件的几种方式(转载了codebrother的文章,做了稍微的改动) /** * Java事件监听处理——自身类实现ActionListener接口,作为事件监听器 * * @author ...

  8. Android按钮绑定四种方式

    public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCr ...

  9. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

随机推荐

  1. ​Web安全测试解决方案

    Web安全测试解决方案 介绍常见的Web安全风险,Web安全测试方法.测试基本理论和测试过程中的工具引入

  2. N!的近似值_斯特林公式

    公式: N! ~=  sqrt(2 * PI * n) * ((n / e) ^n) 题目类型不慌都.

  3. 关于PHP程序员技术职业生涯规划[转]

    看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是学习各种PHP框架 ...

  4. [LeetCode&Python] Problem 530. Minimum Absolute Difference in BST

    Given a binary search tree with non-negative values, find the minimum absolute difference between va ...

  5. ortp 发送RTP实例

    参考源代码目录src/tests/rtpsend.c     ortp_init();     ortp_scheduler_init();     ortp_set_log_level_mask(O ...

  6. 洛谷P2051 中国象棋（dp）

    题目链接:传送门 题目大意: 在N行M列的棋盘中放象棋中的“炮”,问要使得“炮”两两互不伤害,有多少种放法. 1 ≤ n,m ≤ 100,答案对9999973取模. 思路: 按行更新答案.每行炮可以放 ...

  7. HPU1460: 杨八方的表面兄弟

    题目描述 如果你之前关注过HPUOJ的话,那么你一定听说过杨八方的名字.在去年,很多同学共同见证了杨八方同学的填报志愿.来到学校.军训--或许你曾陪同杨八方一起思考过许多问题,又或者你是刚听说这个名字 ...

  8. Tomcat介绍、安装jdk、安装Tomcat、配置Tomcat监听80端口

    1.Tomcat介绍 2.安装jdk下载:wget -c http://download.oracle.com/otn-pub/java/jdk/10.0.1+10/fb4372174a714e6b8 ...

  9. （9）SQL的注入（致命的漏洞）

    用户登陆网站的时候进行账户验证输入特殊的格式和字符会触发一个漏洞,不需要密码直接登录成功 import pymysql username = input('请输入账号: ')password = in ...

  10. 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...