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

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

• javascript
• jquery
• mobile-safari

• 3 live is deprecated. If you are using version 1.9 and above, live is removed. – nhahtdh Commented Jan 27, 2013 at 8:31
• Try with api.jquery./on – elclanrs Commented Jan 27, 2013 at 8:31
• @nhahtdh I wansnt aware about that. I am using jquery 1.8 though. But if live is removed, how would you add these properties to dynamic elements? – Jonathan Commented Jan 27, 2013 at 21:47
• @elclanrs I tried on, as described in one of the answers. it doesnt seem to work though – Jonathan Commented Jan 27, 2013 at 21:48

5 Answers 5

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

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.

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

replace document with closest non-dynamic parent.

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

The 'click' event seems to be triggered only on 'a' tags, and maybe others, but definitively not on 'body' and 'div'.