jQuery 事件绑定四种方式,delegate委托强大绑定在3.0中修改为on
<!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的更多相关文章
- jQuery绑定事件的四种方式:bind、live、delegate、on
1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...
- android点击事件的四种方式
android点击事件的四种方式 第一种方式:创建内部类实现点击事件 代码如下: package com.example.dail; import android.text.TextUtils; im ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jQuery绑定事件的四种方式区别
jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...
- ASP.NET MVC之下拉框绑定四种方式(十)
前言 上两节我们讲了文件上传的问题,关于这个上传的问题还未结束,我也在花时间做做分割大文件处理以及显示进度的问题,到时完成的话再发表,为了不耽误学习MVC其他内容的计划,我们今天开始好好讲讲关于MVC ...
- SWT组件添加事件的四种方式
在我们CS日常开发过程中会经常去为组件添加事件,我们常用的为AWT与SWT.SWT的事件模型是和标准的AWT基本一样的.下面将按照事件的四种写法来实现它. 一.匿名内部类的写法 new MouseAd ...
- Java添加事件的四种方式
Java添加事件的几种方式(转载了codebrother的文章,做了稍微的改动) /** * Java事件监听处理——自身类实现ActionListener接口,作为事件监听器 * * @author ...
- Android按钮绑定四种方式
public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCr ...
- jQuery绑定事件的四種方式
这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...
随机推荐
- java杨辉三角和空心菱形(二维数组篇)
一.杨辉三角 import java.util.Scanner; //导入包 public class Test7 { public static void main(String[]args){ S ...
- http协议与websocket协议(转)
一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...
- ogg-./ggsci ./ggsci: error while loading shared libraries: libnnz11.so:
测试环境,安装linux 0gg,解压介质后./ggsci无法使用,提示目录不存在 原来是环境变量导致的问题: 1.报错现象 [ogg@enmo ogg]$ ./ggsci ./ggsci: erro ...
- 【leetcode】66-PlusOne
problem Plus One code class Solution { public: vector<int> plusOne(vector<int>& digi ...
- [LeetCode&Python] Problem 258. Add Digits
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- P2331 [SCOI2005]最大子矩阵 (动规:分类讨论状态)
题目链接:传送门 题目: 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式: 第一行为n,m,k( ...
- lesson9-小象学院cv
www.sohu.com/a/159976204_717210 生成模型:基于联合概率~共生关系判别模型:基于条件概率~因果关系 生成模型之学习数据分布:1)概率密度函数估计 2)数据样本生成 模型目 ...
- windows 下安装composer
安装 1.在PHP目录下,打开php.ini文件,开启openssl扩展.去掉extension=php_openssl.dll前面的分号(;) 2.把php目录添加到环境变量(和php.exe同级目 ...
- 嵌套for
- Learning by doing——小黄杉获得感想
突然想起来前一个月答应了栋哥要写一篇博客的,后来一直忙于复习就忘了. 不过答应了的事就要完成嘛. 获得感言 首先就是非常高兴的了,这也是对我的能力的一种肯定 这次的获得原因是期中考最快满分,emmm侧 ...