js动态元素绑定事件_jquery、原生js实现动态添加新元素_监听事件

时间: 2018-04-08阅读: 2254标签: js事件

在实现click绑定事件的时候,发现只能对已经加载好的元素进行绑定,如果后来通过js动态插入的元素则无法绑定事件,这里以jquery为例,比如:

<section>
    <p>Click</p>
</section>
<button type="button" >Append A P</button>
<script>
$(document).ready(function(){
     $('p').click(function(){
        console.log('click');
     })    
     $('button').click(function(){
        $('section').append('<p>Click</p>');
    })
})
</script>

除了第一个p元素外,通过button添加的p元素点击时候,在控制台无法打印click。说明监听失败了,那么给如何实现动态元素的事件监听呢?


jquery 1.7版以前使用live动态绑定事件:  

$("p").live("click",function(){
     	console.log('click');
});

jquery 1.7版以后使用on动态绑定事件 : 

$("section").on("click","p", function() {
     console.log('click');
});


如果不是使用jquery,原生的情况呢,例如:

<section>
    <p>Click</p>
</section>
<button type="button" >Append A P</button>
<script>
window.onload=function(){
	var dom=document.getElementsByTagName('p');
	for(var i in dom){
		dom[i].onclick=function(){
			console.log('click');
		}	
	}
	document.getElementsByTagName('button')[0].onclick=function(){
		document.getElementsByTagName('section')[0].insertAdjacenthtml('beforeend','<p>Click</p>');
	}
}
</script>


使用onclick也不能监听到新添加的元素事件,需要如何解决呢?

document.getElementsByTagName('section')[0].onclick=function(ev){
	var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.tagName === 'P'){
         console.log('click');
    }
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/599

关闭

通过原生js对DOM事件的绑定的几种方式总汇

在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。

js中的事件委托或是事件代理详解

事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。

vue自定义移动端touch事件,点击、滑动、长按事件

vue自定义指令_监听移动端touch事件,包括:点击、滑动、长按等事件,加强对Touch的一些理解。Vue.directive指令封装的使用

你知道哪些html事件不能冒泡?

我们都知道一般事件的流程是:事件捕捉——>目标元素发生事件——>事件冒泡。但是不是所有的事件和click事件都一样是冒泡的,那么如何判断给事件是否不能冒泡呢?

js事件冒泡和事件捕获详解

事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。

Javascript - 事件顺序

“假设一个元素及其祖先元素的事件句柄指向了同一事件,哪个先触发?”不出意料,这取决于浏览器。

js 按键监听_JS实现监听组合按键

有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制、粘贴等等。下面简单梳理一下思路,我们所熟悉的按键有这么集中类型:

js操作DOM事件中event的target和currentTarget的区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!