jQueryの委任IOSの障害ソリューション

2017年5月18日11時14分22秒544個の単語965を読んで

I.はじめに

最近、同僚が遭遇していない推定値は何もすることができない場合はIOSでより多くの奇妙な問題は、時間のフロントページの開発に本当のテストを終了登場しました。今日、それはここに記録され、一部は数人の友人の周りにいくつかの迂回路が発生する可能性があります思い出させます。これは、トリガすることができない結合イベントのデリゲートとダイナミックな要素ではJQueryについてです。一例として、次の資料では、委任します。

二つは、jQueryのの役割を委任します。

まず、我々は、委任の役割を見てください。パッシング文：「動的な要素を追加するための結合イベント」

図：

テストインタフェース

ここで追加するには、「テストボタンを追加」ボタンをクリックすることにより、9つのテストボタンをしています。これは、動的に追加された要素の概念です。その後、イベントを追加するために、各テストボタンの需要が統一されたプロセスを持っています。あなたは出力をクリックしたときにここでテストしたように、メッセージ「あなたは+ボタン名をクリックしてください」。
通常の方法に従って、イベントバインディング、.click（）、など。コードは以下の通りです

$(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());
    })
})

効果はのようになります。

テストコード

次に我々は、デリゲートに次のコードを通常のイベントをバインドします。

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

デリゲート効果

通常の効果

これまでのところ、デリゲートは、結合事象の動的要素の問題を解決します。

三、IOSシステムにおけるjQueryの委任の失敗

その上、我々が何をしたいの必要性が、まだ本当のピットが来ているという事実を認識しているようです。IOSシミュレータ次Chromeは今、すべての通常の後。プロジェクトは、実際のマシン上で実行されているときには、また、応答を失っテスト]ボタンをクリックしてください。携帯電話への影響を確認するために、我々は、アラートにconsole.logに入れます

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

結果は、RIPラップへの直接のインターフェイスです。

IOS実機が応答しませんでした

任意の警報情報なしクリックしてください

この問題は、旅の検索を開始した対処するために、ハードワークが報わ（検索することは困難ではありません）。すべての奇妙な質問の背景に、魔法の解決策があるでしょう。

動的に新しい-BTN追加CSSのカーソルの属性を追加

.new-btn{
    cursor: none;
}

まあ魔法

IOS実機正常な反応

次のようにユーザーの答えは次のとおりです。

ユーザーソリューション

答え住所

其实苹果对于性能的要求是近乎苛刻的，这样的特性应该是苹果为了节省性能开销而产生的一个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;
}

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

after you

发布了293 篇原创文章 · 获赞 27 · 访问量 12万+

私信关注

jQueryの委任IOSの障害ソリューション

jQueryの委任IOSの障害ソリューション

おすすめ