リーフレット+ Cordova + Jquery + Jquerymobile：ポップアップのボタンのイベントをiOSで動作しない

Question

私はCordova APPでリーフレットを使用しています。

は、私が使用します。

• リーフレット1.0.3 + ed36a04
• Leaflet.GoogleMutant.js
• コルドバ
• のjQuery
• Jquerymobile

私はポップアップを作成次のコード：

function onMapClick(e) {  

    getaddressFromLatLon(e.latlng.lat,e.latlng.lng, function(){ 
     map.setView(new L.LatLng(e.latlng.lat,e.latlng.lng), defaultv.selectZoom); 
     popup 
     .setLatLng(e.latlng) 
     .setContent("New My name:"+' '+ 
     '<a href="index.html" id="clickName"><span id="popupSpan">' + $('#My_Name').val() + '</span></a><br/> <input id="popupInput" type="text" value="'+$('#My_Name').val()+'"/></br><input class="btn_addMy" type="button" id="submitMy" value="All"/>' + 
        '<input class="btn_addMy" type="button" id="submitMySup" value="Only"/>' + 
     '' 
     ) 
     .openOn(map); 
     $("#popupInput").keyup(function (e) { 
     $('#My_Name').val(this.value); 
     }); 
     $(".btn_addMy, #clickName").on("click",function (e) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     map.closePopup(); 

     insertMyToDB(e.target.id); 
     }); 
    } 
    ); 
} 

map.on('contextmenu', onMapClick); 

私はこの問題は、リップルとAndroidが正常に動作のみのiOS（シミュレータと実際のデバイスの両方） に起こる...

をテキスト入力やボタンやハイパーリンクのいずれかをクリックすることはできません...

注：ボタンはまったくクリックされていないようです（クリックされても何も起こりません）

何か提案がありますか？

おかげ

UPDATE

私は最小を露出するケースが減少し、私はそれがleaflet.GoogleMutantとiOSにリンクされています確認することができます。

同じ問題Safariはgooglemutantからデモ（https://ivansanchez.gitlab.io/Leaflet.GridLayer.GoogleMutant/demo.html）に次のコードを追加することで起こる：

function onMapClick(e) { 

map.setView(new L.LatLng(e.latlng.lat,e.latlng.lng), 12); 

var popup = L.popup() 
     .setLatLng(e.latlng) 
    .setContent('<input class="btn_addMy" type="button" id="submitMy" value="All" onclick="alert(\'clicked\')"/>') 
    .openOn(map);} 
map.on('contextmenu', onMapClick); 

注：問題は、Safariのデスクトップに表示されないが、それはSafariのモバイル

Answer 1

それは問題が がcaniuse.comに記載されているようにgoogleMutantプラグインのCSSが Z-を設定するためのSafariは、ポインタ・イベントをサポートしていないということです Leaflet map issue in Safari using iPhone and iPad

でNasitからのポストのように見えます[OK]をリーフレットトップCSSクラス を使用してインデックス値を1000に設定すると、ブラウザは他のすべての上に位置するとみなします。

正しい答え含まれています。実用的な観点のもと

を、私は

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000 

に

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000 

からLeaflet.GoogleMutant.jsに次の行を変更し、今それは動作します。

私は...しかし、コメント

Answer 2

試していませんあなたのクリックリスナーを未登録の負荷に登録する。 jQuery on（）メソッドを使用すると、要素を動的に作成できます。

window.onload = function(){ 

    $(".btn_addMy").on("click", "#clickName" ,function (e) {}); 

} 

はまた、私は要素にCSS

cursor: pointer; 

を追加すると、iOSの上で助けることができることを見てきました。私は最近iOS上でのみ同様の問題を抱えていて、これらの方法が私のために働いた。