jQuery绑定事件
1.事件绑定的方式
事件
DOM:三种绑定方式
jQuery:
#前面几种内部调用的全是on
$('.c1').click()
$('.c1').blur()
$('.c1').aaaaa() $('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){}) $('.c1').delegate('a','click',function(){}) #不同于其它,有委托的作用。 .c1 下面所有的a 标签都绑定click事件。
$('.c1').undelegate('a','click',function(){})
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})
2. 由于程序是从上往下执行,所以对新输入的值没有绑定alert事件。
delegate 从上往下执行的时候,还没有绑定事件。直到真正点击它的时候,才绑定并且执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<ul id="ul">
<li>123</li>
<li>456</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function(){
var v=$('#t1').val();
var temp="<li>"+v+"</li>";
$('#ul').append(temp);
}); $('ul li').click(function(){
v=$(this).text();
alert(v);
})
</script>
</body>
</html>
所以需要重新绑定
3. delegate具有委托的作用,不同于其它几个。
click不行,bind不行,on不行,delegate可以。委托。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<ul id="ul">
<li>123</li>
<li>456</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function(){
var v=$('#t1').val();
var temp="<li>"+v+"</li>";
$('#ul').append(temp);
}); $('ul').delegate('li','click',function(){
v=$(this).text();
alert(v);
})
</script>
</body>
</html>
jQuery绑定事件的更多相关文章
- jQuery绑定事件-多种方式实现
jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...
- jQuery绑定事件的四種方式
这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...
- jQuery绑定事件的on()
jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个) 也可以为其子元素加事件(一个或多个) ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- 关于jquery绑定事件执行两次
经常会出现jquery绑定事件执行两次的情况,如: $("a[tag=slide]").click(function () { alert(1); $(this).parent() ...
- jquery绑定事件时如何向事件函数里传参数
jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...
- jquery 绑定事件的方法
jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...
随机推荐
- PHP基础知识试题
转载于:http://www.php.cn/toutiao-415599.html 1.PHP中传值与传引用的区别,什么时候传值,什么时候传引用? 按值传递:函数范围内对值任何改变在函数外部都会被忽略 ...
- python基础数据类型3
python_day_5 今日大纲: 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 {'jay':'周杰伦', "jj":'林俊杰'} 注意: ...
- AndroidStudio 新建不同的Drawable文件夹
以前习惯eclipse开发Android的朋友们知道 新创建一个Android项目的时候eclipse会自动生成多个drawable文件夹来存放图片 但是Android Studio 新建项目的时候只 ...
- loadrunner12安装教程
全套五个文件: 独立安装包,插件包,LR安装包,语言包,版本说明书 loadrunner 12安装教程 1.首先下载Loadrunner12安装包.下载下来将会有四个安装包. HP_LoadRunne ...
- 自动化运维工具saltstack03 -- 之SaltStack的数据系统
SaltStack数据系统 saltstack有两种数据系统:grains与pillar 1.SaltStack数据系统之grains grains可以收集minion端的静态数据(即机器启动时收集一 ...
- Unity利用Share SDK实现QQ、微信及微博第三方登录及定制内容分享(附代码)
最近因为公司的项目需要添加一些实用性的功能,需要添加第三方登录及分享,采用的是Mob的SDK,可以先到其官网下载对应的SDK 点击这里,为了方便后期进行数据统计和分析,所以可以先添加一个应用,添加成功 ...
- 从零开始的Python学习Episode 13——常用模块
模块 一.time模块 时间戳(timestamp) :时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量. 元组(struct_time) :struct_time元组共有9 ...
- Debian 给非 ROOT 用户添加 sudoer 权限
问题描述 从官方镜像安装的 Debian 9 (Stretch)比较纯净,但因此需要自己安装.配置许多常用的 Linux 应用,这里就需要 sudo (super user do)临时获取 root ...
- ubuntu 设置全局代理
ubuntu配置shadowsocks全局代理 在mac.window平台下都有shadowsocks客户端,因此这两个平台不叙述太多,现在介绍ubuntu下的配置方法. 1.安装python lin ...
- .NET导出Excel之NPOI
前段时间研究过微软的Excel导出.table输出Excel,而它们也存在一些弊端: 1.对于微软的Excel导出存在一些弊端,如:需要安装Office软件.速度问题: 2.table输出Excel在 ...