3

我正在尝试在我的导航栏中实现一个下拉菜单。在我的桌面上似乎一切正常，但在电话上，我的 jquery .live("click") 似乎没有工作。我也尝试添加 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;
});
4

5 回答 5

4

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 示例

于 2013-01-31T15:02:30.957 回答
3

它不完全清楚什么不起作用。

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

希望这可以帮助。

于 2013-01-31T13:08:26.897 回答
2 
$(document).on('click', '#notif-load-dropdown', function(e) {
  e.preventDefault();
  $('#notif-load').load(this.href);
});

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

于 2013-01-27T09:00:34.870 回答
1

live() 已弃用， load() 自 jQuery 1.8 起也已弃用。

无论如何，试试这个：

$('#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;
});
于 2013-01-27T08:47:03.870 回答
1

“点击”事件似乎只在“a”标签上触发，也许还有其他标签，但绝对不会在“body”和“div”上触发。

于 2014-07-17T09:26:37.957 回答