js 给动态元素绑定事件

2024-11-04

JS动态添加元素的事件动态绑定

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="http://js.tgimg.cn/jquery/base/jquery.min.js"></script> <script>

为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { alert('I was clicked!'); }); 上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败. 正确的做法是,等待元素加载完后再执行 $('a').click(); $('body').load('LearnClickBi

js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

js进阶---12-11.jquery如何给动态创建出来的元素绑定事件一.总结一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它参数的使用不一样,为什么? 因为字符串参数默认会被当成动态生成元素的事件绑定方法,所以需要在前面添加参数null. 64 $('#btn1').on('click',null,'div',function(e){ 65 alert('事件绑定'+e.data) 66 }) 对比一下额外参数的json

js动态添加的元素绑定事件

最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断点击了哪个,然后做相应的操作,第二种是通过事件委托的原理来处理,事件委托将一个事件侦听器实际绑定到整个容器,然后在单击它时能够访问每个列表项,这种更高效一些具体的代码实现如下: 第一:onclick <body> <button onclick="AddJob()"&g

WEB前端技巧之JQuery为动态添加的元素绑定事件.md

jquery 为动态添加的元素绑定事件如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance

Angular如何给动态生成的元素绑定事件

在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:

Jquery动态添加的元素绑定事件的3种方法

假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: <ul id="ul1"> <li><a href="">世界上第三种电梯诞生了,居然是中国人发明的!</a></li> <li><a href="">电视名人辱骂

jQuery 为动态添加的元素绑定事件

在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是无效的,具体写法如下图. $(selector).bind(event,data,function) $(selector).click(function) $("#searchMoveVideoResult ul li").bind("click",function(

jQuery中如何给动态添加的元素绑定事件

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况例如 ? 1 2 3 <div id="testdiv"> <ul></ul> </div> 需要给<ul>里面

jQuery:如何给动态生成的元素绑定事件？

jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在. 然而,jQuery为我们提供了一个函数来解决这个问题,它就是.live()(备注:jquery的后期版本变为.on() ),它可以给所有元素绑定事件,不论是已有的,还是将来生成的,比如: $('#div').live('click',function(){ //do stuff }); 它还可以同时绑定多

jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性

1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法: $(function() { $('.btn').on('click', function() { alert('按钮被点击'); }); $('body').append('<button class="btn">动态添加的按钮</button>'); }); 2.获取checkbox是否被选中,以及操作其选中状态: a.通过prop方

javascript元素绑定事件

js元素绑定事件想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=function(){ alert('b') } 我们发现它只弹出一个,有一个被覆盖了下面就说一下js中的绑定事件 attachEvent(IE中用) var oBtn = document.getElementById('btn1'); oBtn.attachEvent('onclick', fun

jqery 动态添加元素绑定事件

jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId}, success: function(data){ for(var i = 0; i < data.data.length; i++){ var obj = data.data[i]; var temp = '<div class="div_stage"><spa

JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码

1. 为元素绑定事件的引入: 用src直接绑定多个,只实现最后一个(programmer2.js) <input type="button" value="按钮" id="btn"/> <script src="common.js"></script> <script src="programmer1.js"></script> <scrip

通过原生JS实现为元素添加事件

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.

jQuery中对未来的元素绑定事件

对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){ //此处的$(thi

从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.操作元素的宽和

jQuery中对未来的元素绑定事件用bind、live or on

对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){ //此处

jQuery对动态添加的元素绑定事件（on()的用法）

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后逻辑 }); 但是对用js动态添加的元素是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

动态添加的html元素绑定事件的方法

避免先写了DOM操作,但是元素是动态加载的,所以点击不生效,比较好的方法有两个: 1.动态添加的时候加行内事件,比如onclick="funcName()" 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二: 2.jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件. $("#optionGroup").on('click','.input-group .delete-option',function () {

jquery给动态生成的元素绑定事件，on函数

首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解: html中有这样一个table: 1 <div class="table-responsive"> 2 <table class="table table-bordered"> 3 <thead> 4 <tr> 5 &