I have a web page which contains some divs with id option and jquery event that make some changes when you click on one of that’s divs. jQuery event works perfectly for desktop and android users, but there is some issues with web page for iPhones. For some iPhones this event is not working, I tested different iPhones and I discovered that:
Something you need to know:
- For some iPhone 11 event is not working.
- For Iphone XS divs are not clickable
- Divs are perfectly styled for iPhones
- The are not overlapping each other or any other element in web page
- I tested the web page on three different iPhone 11 devices, and on two of them, the div was not clickable.
- The web page works flawlessly on iPhone 12 and 13 devices.
- I tried adding touchstart and touchend but it didn’t helped
- I’m using jQuery version 3.6.1.
- During testing on Xcode for different simulation, the div was clickable.
$(".option").on("click", function(event) {
event.preventDefault();
let dataCur = $(this).data("cur");
let imageUrl = $(this).find(".pm_select_img img").attr("src");
let optionText = $(this).find("span").text();
$("#firstBtn .pm_select_img img").attr("src", imageUrl);
$("#firstBtn span").text(optionText);
$("#firstBtn").data("cur", dataCur);
$("#currency1 .pm_select_child").attr("data-cur", dataCur).text(dataCur);
$("#hiddenInput").val(dataCur);
$("#amount_send1").attr("data-cur", dataCur);
$("#amount_send1 ~ .addons").text(dataCur);
const secondDataCur = $("#currency2 a").data("cur");
fetch("/calculateExchangeRate",{
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
firstCryptoCurrencySymbol: dataCur,
secondCryptoCurrencySymbol: secondDataCur
})
})
.then(res => res.json())
.then(data => {
const exchangeRate = data.rate;
$(".rate_info").text(`1 ${dataCur} = ${exchangeRate} ${secondDataCur}`);
});
$("#firstDrop").toggle();
});