一徊哑、前言

最近同事在開發(fā)一個(gè)前端頁(yè)面的時(shí)候在IOS端真機(jī)測(cè)試下出現(xiàn)一個(gè)比較詭異的問題，如果沒有遇到過估計(jì)也是一籌莫展聪富。今天特此記錄一下莺丑，提醒部分可能遇到的朋友少繞一些彎路。這是關(guān)于JQuery 中的 delegate 和 on 綁定動(dòng)態(tài)元素事件觸發(fā)不了的問題墩蔓。文章以下只用 delegate 舉例梢莽。

二、JQuery 的 delegate 作用奸披。

首先我們來了解一下 Delegate 的作用昏名。一句話帶過：“給動(dòng)態(tài)添加的元素綁定事件”

看圖：

測(cè)試界面

下面九個(gè)測(cè)試按鈕是通過點(diǎn)擊上面的 “添加測(cè)試按鈕” 按鈕添加的。這就是動(dòng)態(tài)添加元素的概念阵面。接下來需求為每個(gè)添加的測(cè)試按鈕都有統(tǒng)一的處理事件轻局。這邊作為測(cè)試，當(dāng)點(diǎn)擊時(shí)輸出 “你點(diǎn)擊了+按鈕名稱” 信息样刷。
按平時(shí)綁定事件的方式仑扑，.click() 等方式。代碼如下

$(function(){
    //“添加測(cè)試按鈕” 按鈕點(diǎn)擊事件置鼻，測(cè)試按鈕 class 為 new-btn
    $("#add-btn").click(function(){
        var test_btn_count = $('#btn-line button').size();
        var new_btn_html = '<div class="new-btn btn">測(cè)試按鈕'
                            + (test_btn_count + 1) 
                            +'</div>';
        $('#btn-line').append(new_btn_html);
    });
    
    //用普通的click 綁定事件镇饮。很遺憾，沒任何反應(yīng)
    $('.new-btn').click(function(){
        console.log('你點(diǎn)擊了按鈕：'+$(this).text());
    })
})  

效果如圖：

測(cè)試代碼

接下來我們將普通的綁定事件換成 delegate ,代碼如下：

//btn-line 為存放 new-btn 的容器
$('.btn-line').delegate('.new-btn','click',function(){
    console.log('你點(diǎn)擊了按鈕：'+$(this).text());
})

delegate 效果

效果正常

至此箕母，Delegate 解決了動(dòng)態(tài)元素的事件綁定問題储藐。

三、JQuery Delegate 在 IOS 系統(tǒng)中失效問題

上面好像已經(jīng)實(shí)現(xiàn)了我們要的需求司蔬，但事實(shí)證明真正的坑還在后面∫厍眩現(xiàn)在 Chrome 下面的 IOS模擬器下面全部正常。但是當(dāng)項(xiàng)目正在跑在真機(jī)上俊啼，點(diǎn)擊測(cè)試按鈕又失去了反應(yīng)。為了在手機(jī)上看到效果左医，我們先把 console.log 換成 alert

$('.btn-line').delegate('.new-btn','click',function(){
    alert('你點(diǎn)擊了按鈕：'+$(this).text());
})

結(jié)果是界面直接懵圈了授帕。

IOS真機(jī)沒反應(yīng)

點(diǎn)擊沒有任何的 alert 信息

針對(duì)這個(gè)問題開始了搜索之旅，功夫不負(fù)有心人（其實(shí)不難搜到）浮梢。一切詭異的問題后面都會(huì)有一個(gè)神奇的解決方案跛十。

給動(dòng)態(tài)添加的 new-btn 添加 css cursor屬性

.new-btn{
    cursor: none;
}

神奇地好了

IOS真機(jī)正常反應(yīng)

網(wǎng)友對(duì)此的回答如下：

網(wǎng)友解答

答案地址

其實(shí)蘋果對(duì)于性能的要求是近乎苛刻的，這樣的特性應(yīng)該是蘋果為了節(jié)省性能開銷而產(chǎn)生的一個(gè)bug秕硝。如果沒有可點(diǎn)的特性的元素系統(tǒng)默認(rèn)不會(huì)給它響應(yīng)事件芥映。而我們添加的這個(gè) cursor 屬性就是讓元素看起來是可以點(diǎn)擊的，也就向操作系統(tǒng)指明這個(gè)元素是需要響應(yīng)事件的。

也就是說奈偏，想要一勞永逸坞嘀，給body 添加 cursor:pointer 樣式屬性【矗或者按照網(wǎng)友提供的方法丽涩，通過js判斷當(dāng)前是否為蘋果設(shè)備，如果是則加上裁蚁。

代碼如下：

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

其實(shí)我到時(shí)覺得css代碼更干脆

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

直接給body或者是給 * 添加這個(gè)屬性都違背了蘋果節(jié)約性能開銷的初衷矢渊，最好的方式還是直接給需要響應(yīng)事件的元素添加 cursor 屬性.

.yourElementClass{
    cursor：pointer;
}

限于筆者技術(shù)，文章觀點(diǎn)難免有不當(dāng)之處枉证，希望發(fā)現(xiàn)問題的朋友幫忙指正矮男，筆者將會(huì)及時(shí)更新。也請(qǐng)轉(zhuǎn)載的朋友注明文章出處并附上原文鏈接室谚，以便讀者能及時(shí)獲取到文章更新后的內(nèi)容昂灵，以免誤導(dǎo)讀者。筆者力求避免寫些晦澀難懂的文章（雖然也有人說這樣顯得高逼格舞萄，專業(yè)）眨补，盡量使用簡(jiǎn)單的用詞和例子來幫助理解。如果表達(dá)上有好的建議的話也希望朋友們?cè)谠u(píng)論處指出倒脓。
本文為作者原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處! 東野文然