В IE <9 проблема с <li>делегированием кликов по меню в jQuery 1.5.2

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 <9. Я попытался включить ie-7.js для модернизации совместимости, но без кубиков. </p>

Пожалуйста, не комментируйте, что мне нужно обновить jQuery (если это не единственное исправление), этона данный момент для меня это не вариант.

Answer 1

Проблема была с удалением меню more из DOM. Я предполагаю, что IE не держит ссылку в jQuery, когда элемент удаляется или что-то в этом роде. Я просто изменил:

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

до

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

на основании комментария Джека. Спасибо!