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

问题描述：

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

解决方案：

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

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

同时，事件函数的声明也是应该放到该段代码所在函数的同级以上。

方案二：通过事件委派来添加，但是考虑到委派到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;