In my web app, there is a separate navbar for mobile devices. I want this navbar to collapse when the menu button is clicked or anywhere else in the site is clicked. It alre
Anyway I finally found a solution. The reason was, iPhone Safari doesnt support event delegation. What my initial requirement was to trigger the click event when the body of the HTML is clicked. Anyway the issue was only occurring on Safari mobile and the reason I found was, Safari doesn't support event delegation for the click event. I solved it by adding below code in the body CSS.
cursor: pointer;
Thre resources I got the answer were, Click event delegation on the iPhone
and
jQuery click events not working in iOS : Answer
And Dohab, Thank you for your answer too.
You can create a div container for the entire page, and bind it to a click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="container">
<p>If you click anywhere. I will hide</p>
...
...
</div>
</body>
</html>