码迷,mamicode.com
首页 > 移动开发 > 详细

通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案

时间:2018-02-23 23:55:02      阅读:873      评论:0      收藏:0      [点我收藏+]

标签:异常   log   xhr   解决方案   执行   post   end   dom节点   json   

问题描述:

如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上的问题,但是这种情况的确是遇到了多次,问题原因有待日后深入理解,下面记载一下问题的解决方案。

解决方案:

方案一:将事件绑定直接写在行内标签上"<thead onclick=‘myFunction(this)‘ >",其中,this代表的是当前元素,是一个原生对象,如果需要传一个jQuery对象作为参数,直接写

"<thead onclick=‘myFunction($(this))‘ >"即可。

同时,事件函数的声明也是应该放到该段代码执行之前,比如先引入的公用的js文件中。

方案二:通过事件委派来添加,但是考虑到委派到document上面的事件太多,会增加负担,所以自己在使用的过程中,采用了方案一。

mui.ajax(‘url‘,{
	data:{},
	dataType:‘jsonp‘,
	type:‘post‘,
	timeout:10000,
	success:function(data){
		var obj = eval(‘(‘+data+‘)‘);
		var result = obj.data;
		var html=‘‘;
		var frag=document.createDocumentFragment();			
		html="<table>"
			+"<thead onclick=‘myFunction(this)‘ class=‘myThead‘>"
				+"<td>序号</td>"
				+"<td>标题1</td>"
				+"<td>标题2</td>"
				+"<td>标题3</td>"
				+"<td>标题4</td>"
				+"<td>标题5</td>"
				+"<td>标题6</td>"
				+"<td>标题7</td>"							
			+"</thead>"							
		+"</table>";
		frag=html;
	 	$(‘body‘).append(frag);		 				 	
//		$(‘.myThead‘).click(function() {
//			alert(‘clicked‘);
//		});
//		function myFunction() {
//			alert(‘clicked‘);
//		}
	},
	error:function(xhr,type,errorThrown){
		mui.toast(‘网络异常,请稍后再试‘);
	}					
});

如果是采用方案二的话,在ios上面还可能会遇到委派事件失效的问题,具体的问题描述及解决方案如下:

问题描述:

当使用委派给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 divspan 等),此时 click 事件会失效

解决方案:直接给需要添加点击事件的元素添加以下CSS属性即可

cursor:pointer;

通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案

标签:异常   log   xhr   解决方案   执行   post   end   dom节点   json   

原文地址:https://www.cnblogs.com/chaoyueqi/p/8463609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!