I'm trying to get a Div to open when it's clicked and close when anything else on the page is clicked and it works fine on all browsers except iOS, where it only closes if you click on an image. There are several similar questions on here, mainly this one sounds like my problem ($(document).click() not working correctly on iPhone. jquery) but sorry, I can't get any of them to work - can anyone help?
And WHY is this the case - what's special about an image/jQuery in iOS?
HTML:
<p>Click on the box to show the div</p>
<div id="toolbar">
<div id="searchbox">
<p>Click anywhere else to hide the div</p>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" width="240" height="240" />
jQuery:
$(document).ready(function () {
$('#toolbar').click(function (e) {
$('#searchbox').fadeIn();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
$('#searchbox').fadeOut();
});
});
See fiddle here: http://jsfiddle.net/atype/PqdTK/7/