Clever Geek Handbook

.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="&#xe01d;"></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;
});
+3


source to share


5 answers


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.

+2


source


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

+4


source 


$(document).on('click', '#notif-load-dropdown', function(e) {
  e.preventDefault();
  $('#notif-load').load(this.href);
});

replace the document with the closest non-dynamic parent.

+2


source


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;
});
+1


source


The 'click' event seems to only fire on the 'a' tags, maybe others, but definitely not on the 'body' and 'div'.

+1


source






More articles:


All Articles