HTML

Question

我正在尝试在导航栏中实现下拉菜单。一切似乎在我的桌面上工作得很好，但在手机上，我的jquery .live（“点击”）似乎没有工作。我尝试添加onclick =''，但它似乎不起作用！

这是我一直在实施的代码

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不接受点击。你可以使用“touchend”事件。

代替：

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

写

$('#notif-load-dropdown').bind('click touchend' ,function(event){...});

和：对于jQuery 1.7及更高版本：

$('#notif-load').on('click touchend', 'a', function(event){...});

在jQuery 1.7之前

：

$('#notif-load').delegate('a', 'click touchend', function(event){...});

jsbin sample

Answer 2

不清楚什么是无效的。

如果问题是根本没有调用CLICK处理程序，那么您可以尝试使用"touchstart"或"touchend"等触摸事件，因为在触摸设备上您没有鼠标指针，因此您可以' t“点击”。我正在使用jquery.tappable.js，它对我来说很好。

希望这有帮助。

Answer 3

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

用最接近的非动态父级替换文档。

Answer 4

不推荐使用

live（），自jQuery 1.8以来也不推荐使用load（）。

无论如何，试试这个：

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

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

.live（“点击”）事件不适用于ios safari甚至onclick =''isnt

HTML

JS

5 个答案: