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绑定事件的更多相关文章

  1. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

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

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

  3. jQuery绑定事件的on()

    jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个)  也可以为其子元素加事件(一个或多个) ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  6. 关于jquery绑定事件执行两次

    经常会出现jquery绑定事件执行两次的情况,如: $("a[tag=slide]").click(function () { alert(1); $(this).parent() ...

  7. jquery绑定事件时如何向事件函数里传参数

    jquery绑定事件时如何向事件函数里传参数 jquery绑定事件时如何向事件函数里传参数 举例子说明: 步骤1: var button=$('<button type="button ...

  8. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

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

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

  10. jquery 绑定事件的方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

随机推荐

  1. PHP基础知识试题

    转载于:http://www.php.cn/toutiao-415599.html 1.PHP中传值与传引用的区别,什么时候传值,什么时候传引用? 按值传递:函数范围内对值任何改变在函数外部都会被忽略 ...

  2. python基础数据类型3

    python_day_5 今日大纲: 1. dict 用大括号{} 括起来. 内部使用key:value的形式来保存数据 {'jay':'周杰伦', "jj":'林俊杰'} 注意: ...

  3. AndroidStudio 新建不同的Drawable文件夹

    以前习惯eclipse开发Android的朋友们知道 新创建一个Android项目的时候eclipse会自动生成多个drawable文件夹来存放图片 但是Android Studio 新建项目的时候只 ...

  4. loadrunner12安装教程

    全套五个文件: 独立安装包,插件包,LR安装包,语言包,版本说明书 loadrunner 12安装教程 1.首先下载Loadrunner12安装包.下载下来将会有四个安装包. HP_LoadRunne ...

  5. 自动化运维工具saltstack03 -- 之SaltStack的数据系统

    SaltStack数据系统 saltstack有两种数据系统:grains与pillar 1.SaltStack数据系统之grains grains可以收集minion端的静态数据(即机器启动时收集一 ...

  6. Unity利用Share SDK实现QQ、微信及微博第三方登录及定制内容分享(附代码)

    最近因为公司的项目需要添加一些实用性的功能,需要添加第三方登录及分享,采用的是Mob的SDK,可以先到其官网下载对应的SDK 点击这里,为了方便后期进行数据统计和分析,所以可以先添加一个应用,添加成功 ...

  7. 从零开始的Python学习Episode 13——常用模块

    模块 一.time模块 时间戳(timestamp) :时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量. 元组(struct_time)   :struct_time元组共有9 ...

  8. Debian 给非 ROOT 用户添加 sudoer 权限

    问题描述 从官方镜像安装的 Debian 9 (Stretch)比较纯净,但因此需要自己安装.配置许多常用的 Linux 应用,这里就需要 sudo (super user do)临时获取 root ...

  9. ubuntu 设置全局代理

    ubuntu配置shadowsocks全局代理 在mac.window平台下都有shadowsocks客户端,因此这两个平台不叙述太多,现在介绍ubuntu下的配置方法. 1.安装python lin ...

  10. .NET导出Excel之NPOI

    前段时间研究过微软的Excel导出.table输出Excel,而它们也存在一些弊端: 1.对于微软的Excel导出存在一些弊端,如:需要安装Office软件.速度问题: 2.table输出Excel在 ...