Leaflet + Cordova + Jquery + Jquerymobile: click events on buttons of popup not working on iOS

Question

I'm using Leaflet in a Cordova APP.

I use:

Leaflet 1.0.3+ed36a04
Leaflet.GoogleMutant.js
Cordova
Jquery
Jquerymobile

I created a popup with the following code:

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);

I cannot click either the text input or the buttons or the hyperlinks...

This issue happens only on iOS (both simulator and real devices) Ripple and Android work fine...

Please note: it looks like the button is not clicked at all (not that is seems clicked but nothing happens)

Any suggestion?

Thanks

UPDATE

I reduced the case to bare minimum and I can confirm it's linked to leaflet.GoogleMutant and iOS.

Same issue happen with Safari adding the following code to the demo from 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);

NOTE: The problems does NOT appear with Safari Desktop but it does with Safari mobile

UPDATE:I reduced the case to bare minimum and I discovered it's definetively linked to leaflet.GoogleMutant... — lui, Apr 20 '17 at 09:59

L Balsdon · Answer 1 · 2017-04-19T11:51:15.163

0

Try registering your click listener on widow load. Using the jQuery on() method the element can be dynamically created.

window.onload = function(){

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

}

Also I have seen that adding the CSS

cursor: pointer;

To the elements can help on iOS . I have had a similar issue recently only on iOS and these methods worked for me.

edited Apr 19 '17 at 11:51

answered Apr 19 '17 at 11:46

L Balsdon

995
8
12

Thanks for suggestion... tried all with no luck... anyway I switched from GoogleMutant to OpenStreetMap and all works now... it looks like the issue is there... not sure why it affects iOS only... – lui Apr 19 '17 at 21:00

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Ok it looks like the post from Nasit at Leaflet map issue in Safari using iPhone and iPad

The problem is that Safari does not support pointer-events as described on caniuse.com and because the googleMutant plugin CSS sets the z-index value to 1000 via the use of the leaflet-top CSS class, the browser considers it to be located above everything else.

contains the right answer:

Under the practical point of view, I changed in Leaflet.GoogleMutant.js the following line from

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

to

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

And now it works.

I'm not sure what is affected by this change though... thanks for comments

Leaflet + Cordova + Jquery + Jquerymobile: click events on buttons of popup not working on iOS

2 Answers2