文档章节

Jquery给动态添加的元素添加事件

会游泳的鱼_
 会游泳的鱼_
发布于 2017/07/07 18:59
字数 336
阅读 5
收藏 0

首先要引入jQuery库

利用jq的事件委托on(建议)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="input">
    <input class="whichkey" value="type something">
</div>
<button class="click">点击添加输入框</button>
<div id="log"></div>
<script>
	$('.input').on('keydown','.whichkey',function(e){
		//检测输入框按下的是那个键并显示键值
	   $('#log').html(e.type + ': ' +  e.which );  
	});
   $('.click').click(function(){
   		//动态添加输入框
      $('.input').append('<input class="whichkey" value="type something">');
	})
 </script>
</body>
</html>

利用jq的事件委托delegate(已废弃) delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="input">
	<input class="whichkey" value="type something">
	</div>
	<button class="click">点击添加输入框</button>
	<div id="log"></div>
<script>
 $('.input').delegate('.whichkey','keydown',function(e){
 	$('#log').html(e.type + ': ' +  e.which );  });
	$('.click').click(function(){
	     $('.input').append('<input class="whichkey" value="type something">');
	 })
</script>
</body>
</html>

© 著作权归作者所有

会游泳的鱼_
粉丝 0
博文 61
码字总数 56162
作品 0
深圳
后端工程师
私信 提问
jquery中对动态生成的标签不会响应click事件

Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 需要用.live jQuery 1.7 开始,不再建议使用 .live() 方法。请使用 .o......

LiShixi
2011/09/03
0
3
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
0
14
jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()

在 jQuery的开发过程中,我们往往需要处理各种事件,例如,click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将 这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如...

kisshua
2012/04/20
0
0
50个必备的实用jQuery代码段(1)

本文会给你们展示50个jquery代码片段,这些代码能够给 你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你 又...

postdep
2014/02/19
0
0
jquery live() delegate() on() 事件委托的一些区别

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委...

rikkilovelife
2015/03/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
4
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
8
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
5
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部