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

AND: 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（）もjQuery1.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 に答える