Failure Solutions on JQuery Delegate IOS

Failure Solutions on JQuery Delegate IOS

2017.05.18 11:14:22 read 544 words 965

I. Introduction

Recently a colleague appeared more strange problem in IOS end real test in the development of a front page of time, if not encountered estimate is unable to do anything. Today, it is hereby record, remind some may encounter some detours around a few friends. This is about JQuery in the delegate and dynamic elements on the binding event can not be triggered. The following article by way of example only delegate.

Two, delegate the role of JQuery.

First, we look at the role of Delegate. Passing sentence: "to add a dynamic element binding event"

Figure:

Test interface

Here are nine test button by clicking the "Add Test button" button to add. This is the concept of dynamically added elements. Then the demand for each test button to add the event has a unified process. As a test here, when you click the output "you click on the + button name" message.
Binding events according to the usual way, .click (), etc.. code show as below

$(function(){
    //“添加测试按钮” 按钮点击事件，测试按钮 class 为 new-btn
    $("#add-btn").click(function(){
        var test_btn_count = $('#btn-line button').size();
        var new_btn_html = '<div class="new-btn btn">测试按钮'
                            + (test_btn_count + 1) 
                            +'</div>';
        $('#btn-line').append(new_btn_html);
    });
    
    //用普通的click 绑定事件。很遗憾，没任何反应
    $('.new-btn').click(function(){
        console.log('你点击了按钮：'+$(this).text());
    })
})  

The effect is as:

Test code

Next we will bind ordinary event into delegate, the following code:

//btn-line 为存放 new-btn 的容器
$('.btn-line').delegate('.new-btn','click',function(){
    console.log('你点击了按钮：'+$(this).text());
})

delegate effect

The effect of normal

So far, Delegate to solve the problem of dynamic elements of the event binding.

Three, JQuery Delegate failures in the IOS system

The above it seems to have realized the need for what we want, but the fact that the real pit yet to come. IOS simulator following Chrome now following all normal. But when the project is being run on the real machine, click the Test button also lost response. In order to see the effect on the phone, we put into alert console.log

$('.btn-line').delegate('.new-btn','click',function(){
    alert('你点击了按钮：'+$(this).text());
})

The result is a direct interface to rip laps.

IOS real machine did not respond

Click without any alert information

To address this problem began a search of the journey, hard work pays off (it is not difficult to search). Behind all the strange questions, there will be a magic solution.

Dynamically add a new-btn added css cursor attributes

.new-btn{
    cursor: none;
}

Well magically

IOS real machine normal reaction

User's answer is as follows:

User Solutions

The answer Address

其实苹果对于性能的要求是近乎苛刻的，这样的特性应该是苹果为了节省性能开销而产生的一个bug。如果没有可点的特性的元素系统默认不会给它响应事件。而我们添加的这个 cursor 属性就是让元素看起来是可以点击的，也就向操作系统指明这个元素是需要响应事件的。

也就是说，想要一劳永逸，给body 添加 cursor:pointer 样式属性。或者按照网友提供的方法，通过js判断当前是否为苹果设备，如果是则加上。

代码如下：

if(/ip(hone|od)|ipad/i.test(navigator.userAgent)){
    $("body").css("cursor","pointer");
}

其实我到时觉得css代码更干脆

body{
    cursor：pointer;
}
//或者
*{
    cursor：pointer;
}

直接给body或者是给 * 添加这个属性都违背了苹果节约性能开销的初衷，最好的方式还是直接给需要响应事件的元素添加 cursor 属性.

.yourElementClass{
    cursor：pointer;
}

限于笔者技术，文章观点难免有不当之处，希望发现问题的朋友帮忙指正，笔者将会及时更新。也请转载的朋友注明文章出处并附上原文链接，以便读者能及时获取到文章更新后的内容，以免误导读者。笔者力求避免写些晦涩难懂的文章（虽然也有人说这样显得高逼格，专业），尽量使用简单的用词和例子来帮助理解。如果表达上有好的建议的话也希望朋友们在评论处指出。
本文为作者原创,转载请注明出处! 东野文然