Question

我正在为工具栏开发一个插件，为菜单生成<ul>，每个操作在此列表中为<li>：

  // HTML for the more dropdown
  var moreTemplate = [
    '<ul class="sooper-dooper-menu">',
      '<li class="favorite">Add to favorites</li>',
      '<li class="info">More info</li>',
      '<li class="comment">Comment</li>',
      '<li class="share">Share</li>',
    '</ul>'
  ].join('');

当用户点击工具栏中的“更多”按钮时，会出现此菜单。要使此菜单发生，我将点击按钮委托给：

$(function() {
  $('body').delegate('.sooper-dooper-toolbar.more', 'click', function() {
    var $more = $(this),
        $menu = $(moreTemplate);

    // only one instance of a menu at a time
    if ($('.sooper-dooper-menu').length > 0) {
      $('.sooper-dooper-menu').remove();
    }

    $menu.attr('id', 'sooper-dooper-menu-' + $more.parent().data('sooper-dooper').id);
    $menu.css({top:$more.offset().top, left:$more.offset().left});
    $menu.bind('mouseleave click', function() {
      $(this).remove();
    });

    $('body').append($menu);
    return false;
  });

  $('body').delegate('.sooper-dooper-menu li', 'click', function() {
    var id = $(this).parent().attr('id').substring(24),
      actions = {
        favorite: function() {_addFavorite(id);},
        info: function() {_info(id);},
        comment: function() {showCommentForm(id);},
        share: function() {showEmailForm(id);}
      };

    actions[$(this).attr('class')]();
    return false;
  });
});

我已经在Firefox，Safari，Chrome和IE中对此进行了测试，除了IE＆lt; 9.我尝试将ie-7.js用于改装兼容性，但没有骰子。

请不要评论我需要升级jQuery（除非这是唯一的解决方案），此时我不能选择。

Answer 1

问题在于从DOM中删除更多菜单。我想当一个元素被删除或其他什么时，IE不会坚持jQuery中的引用。我只是改变了：

$menu.bind('mouseleave click', function() {
  $(this).remove();
});

到

$menu.bind('mouseleave click', function() {
  $(this).hide();
});

基于杰克的评论。谢谢！

IE＆lt; jQuery 1.5.2中<li>菜单点击委派的9个问题</li>

1 个答案: