.live ("click") event doesn't work on ios safari and even onclick = '' isnt
I am trying to implement a dropdown menu in my navbar. Everything seems to work fine on my desktop, but over the phone, my jquery.live ("click") doesn't seem to work. I also tried adding onclick = '' but it doesn't work!
This is the code I was running
Html
<ul class="nav pull-right">
<li class="dropdown">
<a id="notif-load-dropdown" class="dropdown-toggle" data-toggle="dropdown" onclick='' href="/notifications/"><b data-icon=""></b></a>
<ul class="dropdown-menu dropdown-menu2 pull-left">
<h3 class="lead" style="margin-left:25px;">Activity Feed</h3>
<hr>
<span id="notif-load"></span>
</ul>
</li>
</ul>
Js
$('#notif-load-dropdown').live('click', function(event) {
event.preventDefault();
var checkclass = $('#notif-load-dropdown').parent().hasClass('open');
var b = $('html');
if (checkclass){
var w = $(document).width();
var h = $(document).height();
$('#notif-load').css({
position: 'relative',
top : 0,
left : 0,
zIndex : 100
});
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
b = $('html');
b.css('overflow', 'hidden');
var href = $(this).attr('href');
$('#notif-load').load(href);
var chkaclass = $('#notif-load a').hasClass('endless_more');
if (!checkclass){
$('#notif-load a').live('click', function(event){
$('#notif-load').load('/notifications/allread/').load(href);
});
}
$('#overlay').click(function(){
$(this).remove();
$('#notif-load').load('/notifications/allread/');
$('#unread-notif').load('/isunread/');
$('#notif-load').empty();
b.css('overflow', 'auto');
});
}
else
{
$('#overlay').remove();
$('#notif-load').load('/notifications/allread/');
$('#unread-notif').load('/isunread/');
$('#notif-load').empty();
//$('#notif-load-dropdown').parent().removeClass('open');
b.css('overflow', 'auto');
}
return false;
});
It's not entirely clear what isn't working.
If the problem is that the CLICK handler is not being called at all, you can try using touch events like "touchstart"
or "touchend"
, because on touch devices you don't have a mouse pointer, so you cannot "click", I am using jquery.tappable.js and it works great for me.
Hope it helps.
iOS does not accept click. You can use the "touchhend" event.
instead:
$('#notif-load-dropdown').live('click', function(event){...});
and $('#notif-load a').live('click', function(event){...});
records
$('#notif-load-dropdown').bind('click touchend' ,function(event){...});
And: for jQuery 1.7 and up:
$('#notif-load').on('click touchend', 'a', function(event){...});
before jQuery 1.7:
$('#notif-load').delegate('a', 'click touchend', function(event){...});
jsbin sample
$(document).on('click', '#notif-load-dropdown', function(e) {
e.preventDefault();
$('#notif-load').load(this.href);
});
replace the document with the closest non-dynamic parent.
live () is deprecated, load () has also been deprecated since jQuery 1.8.
Anyway, try this:
$('#notif-load-dropdown').live('click', function(event) {
event.preventDefault();
var href = $(this).attr('href');
$('#notif-load').load(href, {}, function(response) {
$(this).html(response);
//alert(response); // show server response, if there is no response, then the issue could be from the server side
});
return false;
});
The 'click' event seems to only fire on the 'a' tags, maybe others, but definitely not on the 'body' and 'div'.