$(document).delegate()在iOS web环境下无响应

背景

最近公司在开发HTML5 Web应用程序，需要在Android和iOS平台上面运行。然而我发现在Android中可以正常响应的按钮在iOS中却不能正常工作，所以有了这篇文章。

寻找原因

其实在iOS环境下并不是所有按钮都不能正常工作，<button>标签的按钮还是表现得很出色的，而有问题的按钮一般都是以非<button>包裹的，需要额外响应点击事件的标签。

test.html

<div>
    <i class="icon iconfont icon-delete"></i>
    <span class="delete">Delete</span>
</div>

<script type="javascript">
    $(document).delegate('.delete', 'click', function () {
        var _this = $(this);
        // do something here...
    });
</script>

所以问题可能出现在$(document).delegate()这个方法上面了。

解决

最后在网上找到了解决方法，原因是在iOS环境（safari）中不会去响应没有事件冒泡的标签，所以只要使需要响应点击事件的标签强制响应就好了。这里给出两种方法：

test_solution1.html

<!-- add additional style to the tag -->
<style>
.delete {
    cursor: pointer;
}
</style>

test_solution2.html

<!-- add onclick="" to the tag -->
<div>
    <i class="icon iconfont icon-delete"></i>
    <span class="delete" onclick="">Delete</span>
</div>

参考

jQuery .on() and .delegate() doesn't work on iPad
Why doesn’t my javascript click event work on iOS/iPhone?