<!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. log4j下载地址及日志文件输入位置配置

    ERROR StatusLogger Log4j2 could not find a logging implementation. Please add log4j-core to the clas ...

  2. 【Python】数字驱动

    #练习1:打开3个网址,每个等3秒钟 urls.txt: http://www.baidu.com http://www.sogou.com http://www.sohu.com main.py: ...

  3. matlab调用规则变量名eval函数

    eval 函数运用!! 经常会遇到matlab里面有些变量命名其实有一样的规律,,但是不像矩阵这些是可以通过循环来获取的,这个时候就可以利用eval语句了:   首先,假设现在有10个名称类似的变量, ...

  4. rem问题

    rem为单位时,根元素html的font-size 必须>=12px,否则 默认为font-size:12px. 为啥 html 设置成 62.5%,或者 10px 时,这种换算无效了呢?经过研 ...

  5. linux 编译链接问题

    -rpath和-rpath-link 假设有3个文件,在同一目录下,有这样的依赖关系 test->liba.so->libd.so 如果编译test的时候这样写 gcc test.c –l ...

  6. Prepare paddle in Docker1

    Use Docker 1. Install Docker sudo apt-get install -y docker.io a) pull repository from server in Chi ...

  7. Unity调用Windows对话框保存时另存为弹框

    Unity开发VR之Vuforia 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  8. UE4开发安卓遇到的坑

    做个记录,方便以后自己查询. 1.  打包后,应用出现缺乏google key的问题. 理论上,这个网站可以解决:https://wiki.unrealengine.com/How_To_Sign_U ...

  9. 【HAOI2015】 T1

    为什么感觉越来越迷了X. X 原题: 有一棵点数为 N 的树,树边有边权.给你一个在 0~N 之内的正整数 K,你要在这棵树中选择 K 个点,将其染成黑色,并将其他的N-K 个点染成白色.将所有点染色 ...

  10. IntelliJ IDEA备忘

    IntelliJ IDEA生成get/set方法的快捷键 IntelliJ IDEA生成get/set有2种方式,alt+enter.alt+insert.下面分别介绍这2种方式快速生成get与set ...