问题描述:
如以下代码所示,通过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
上,并且委托的元素是默认不可点击的(如 div
, span
等),此时 click
事件会失效
解决方案:直接给需要添加点击事件的元素添加以下CSS属性即可
cursor:pointer;