iOS: jQuery addClass na een click event niet zichtbaar

[Ronnyrr]

He Tweakers,

Momenteel loop ik tegen een erg raar probleem aan met het gebruik van jQuery op mijn iPhone. Ik zal eerst het probleem even uitleggen. Ik heb een map van Nederland, met daarin een aantal div elementen welke voor een stad staan. Deze bevatten een span (het rondje) en een tooltip (nog een div):

HTML:

    <figure class="map">
      <div data-city="amsterdam">
        <div class="tooltip">
            Amsterdam
            <span class="arrow"></span>
        </div>
        <span></span>
      </div>
    </figure>

De div met het data-city attribuut wordt herhaald voor iedere stad.
Met CSS wordt de styling toegevoegd en de position bepaald. De map heeft positie relative en de div's absolute.

Door middel van jQuery komt er een click event op iedere data-city div. Zoals je onderstaand kunt zien wordt na een klikt op het element ook een hidden input gevuld. Dit is omdat deze waarde in de database wordt opgeslagen.

JavaScript:

    var city = $('div[data-city]');
    city.on('click', function() {
        $('input[name="city"]').val( $(this).data('city') );

        city.removeClass('active');
        $(this).addClass('active');
    });

Nadat er op een div geklikt is wordt de class active toegevoegd. Deze zorgt ervoor de div display: block; in plaats van display: none; krijgt. Dit ziet er dan als volgt uit:



Nu het echte probleem:
Want bovenstaand werkt perfect op zowel mijn Macbook als een Windows laptop. Echter op mijn iPhone werkt het click event niet zoals gewenst.

Zodra er op een div geklikt is, wordt de active class toegevoegd en de hidden input wordt ook gevuld. Echter blijft de div donker groen (in plaats van licht groen) en ook de tooltip wordt niet getoond.
Om een of andere reden gebeurd dit pas als er ergens anders in de map een tweede keer geklikt wordt (dus niet op één andere of de al eerder geselecteerde div).

Ik heb meerdere dingen geprobeerd zoals het verwijderen van alle CSS transities, het hover event (welke gelijk staat aan de active state) verwijderd op mobiel, andere events (mousedown en tap) geprobeerd, met een timeout een click event op de map getriggerd.. Echter mocht dit helaas allemaal niet helpen.

Hopelijk is hier iemand enigszins bekend met dit probleem, want ik heb geen idee meer wat ik er aan zou kunnen doen. Alle hulp is welkom, bij voorbaat dank!

[Salmon]

code:

cursor: pointer

Toevoegen aan je click? Ik zie een aantal topic op stackoverflow over onclick op IOS dit dit aanraden.

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1', function(event) {
event.preventDefault()
alert('button1');
});

[Ronnyrr]

Bedankt voor je reply!

De div's hadden via CSS al een cursor: pointer; maar aan de hand van het boorbeeld het ik het volgende maar geprobeerd:

JavaScript:

var city = $('div[data-city]');
city.css('cursor','pointer');

$(document).on('click', 'div[data-city]', function() {
    $('input[name="city"]').val( $(this).data('city') );

    city.removeClass('active');
    $(this).addClass('active');
});

Helaas zonder resultaat. Hetzelfde probleem blijft zich voor doen.
Mochten mensen nog andere suggesties hebben, alles is welkom!

[ Voor 15% gewijzigd door Ronnyrr op 05-11-2015 14:02 ]

[FotW]

Dat is omdat de iPhone touch events heeft ipv click events. De cursor pointer oplossing van Salmon zou normaal gesproken moeten werken. Zou je anders even een jsfiddle kunnen maken?

[Ronnyrr]

Haha hou op hoor. Net een codepen gemaakt waar het wel lijkt te werken. Zelfde code als de live versie waar het nog altijd niet werkt.

Any thought?

[ Voor 103% gewijzigd door Ronnyrr op 05-11-2015 15:35 ]

[Nic]

Heb je er toevallig nog een hover in zitten? iOS behandelt dan clicks om de hover state te zetten/resetten, de tweede click pas om echt in actie te komen.
Ik heb er laatst mee zitten worstelen. Dit artikel heeft me erg geholpen om het te begrijpen:
http://www.macfreek.nl/me..._effects_in_a_web_browser
en de Fastclick library om het te helpen oplossen:
https://github.com/ftlabs/fastclick

[Ronnyrr]

@dsltv
Thanks voor je reactie (en sorry voor mijn late reactie).
Ik had het al 'gefixt' door op mobiele apparaten een select box te tonen ipv. de interactieve map. Ik ga nu jouw suggestie proberen door te voeren!

[Ronnyrr]

Even een update hoe het afgelopen is;
Uiteindelijk heb ik de fastclick library getest. Deze had echter niet het gewenste resultaat.
Gelukkig heb ik wél een oplossing weten te vinden en deze was makkelijker dan verwacht. Door naast het jquery 'click' event ook een 'touchstart' event toe te voegen was het opgelost:

JavaScript:

$(document).on('click touchstart', 'div[data-city]', function() {
  $('input[name="city"]').val( $(this).data('city') );

  city.removeClass('active');
  $(this).addClass('active');
});