jQuery "on click" don't work on ios/safari

Question

I know there's bunch of link here for my problem but none of them can solve my problem. I have code like this

$('[name=pie]').on('click change touchstart tap', function() {
  $('#summary_pie').html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
  <input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
  <label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
  <p class="description">Tortilla pszenna</p>
</div>

<p>Tortilla: <span id="summary_pie"></span></p>

and it works on chrome etc. but don't work on ios. I tried: - adding cursor: pointer - adding empty onclick - adding touchend event but nothing work. In my php I have only 2 css (reset.css and my own). Deleting them don't work. Please help me.

Possible duplicate of [How do I use jQuery for click event in iPhone web application](https://stackoverflow.com/questions/3025348/how-do-i-use-jquery-for-click-event-in-iphone-web-application) — Nisal Edu, Dec 22 '17 at 09:17
I reckon your selector needs to be #summary_pie for the click event, not the name pie, and make it a simple click function; ios understands click. — Nathaniel Flick, Dec 22 '17 at 09:26
@Nathaniel Flick I want to pass value from input to span so name pie must be for click event — MMPL1, Dec 22 '17 at 09:35

score 0 · Answer 1 · answered Dec 22 '17 at 12:43

I have just modified click event calling code and also tested the same on ios device.so it may solve your issue.try this

$(document).on('click change touchstart tap','[name=pie]', function() {
  $('#summary_pie').html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
  <input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
  <label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
  <p class="description">Tortilla pszenna</p>
</div>

<p>Tortilla: <span id="summary_pie"></span></p>

score -2 · Answer 2 · answered Dec 22 '17 at 09:26

-2

try

$(document).ready(function(){
$('[name=pie]').on('click change touchstart tap', function() {
        $('#summary_pie').html($(this).val());
    });
})

answered Dec 22 '17 at 09:26

Faisal

584
3
11
33

Ok, it's working. My ajax must have some error because it blocked rest of jquery code – MMPL1 Dec 22 '17 at 09:40
2

From the question: `it works on chrome etc. but don't work on ios` Chrome doesn't automatically assign a document ready handler, so it already exists ;) – Reinstate Monica Cellio Dec 22 '17 at 09:41
@Archer It could be because of some cache behaviour, i guess – A. Wolff Dec 22 '17 at 09:43
While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – yivi Dec 22 '17 at 12:00
It does not work in 2021 – Stefan Dec 04 '21 at 18:23

jQuery "on click" don't work on ios/safari

2 Answers2