.live(“click”) event not working on ios safari and even onclick='' isnt

Question

I am trying to implement a drop-down menu in my navbar. Everything seems to work just fine on my desktop, but on the phone, my jquery .live("click") doesnt seem to be working. I tried adding onclick='' also, but it doesn't seem to work!

This is the code I've been implemting

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

Answer 1

iOS doesn't accept click. You can use event "touchend".

instead:

$('#notif-load-dropdown').live('click', function(event){...});
and $('#notif-load a').live('click', function(event){...});

write

$('#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

Answer 2

Its not exactly clear what is not working.

If the problem is that CLICK handler is not called at all then you can try to use touch events like "touchstart" or "touchend" because on touch devices you don't have mouse pointer so you can't "click". I am using jquery.tappable.js and it works fine for me.

Hope this helps.

Answer 3

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

replace document with closest non-dynamic parent.

Answer 4

live() is deprecated, load() is also 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;
});

Answer 5

“点击”事件似乎仅在'a'标签上触发，也可能在其他标签上触发，但最终不在'body'和'div'上触发。