jquery - 动态加载html后重新附加jQuery函数

Question

我已经搜索和实验了几个小时，我认为解决方案在于 jQuery 中的 .on() 函数。但我似乎无法找出正确的实现。

我有一个选项卡式菜单，我想将内容作为下拉列表添加到其中一个选项卡，该内容应在 document.ready 处加载:

<div id="container" class="layout" style="border: 1px solid">
   <ul class="tabs">
    <li><a id="go_archives" href="#">Archives</a> </li>
    <li><a id="go_answers" href="#">Puzzle Answers</a>
    <ul class="dropdown">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
    </ul>
    </li>
</div>

这是相关的 CSS:

/* menu tab styling */

ul.tabs {
  display: table;
  margin: 0;
  padding: 0 0 20px 2px;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #00AEDB;
}

ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table-cell;
  float: left;
  position: relative;
}

ul.tabs a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  margin: 0 7px 4px 2px;
  padding-bottom: 2px;
  text-decoration: none;
  color: #fff;
}

ul.tabs a:hover {
  border-bottom: 3px solid #FFF;
  padding-bottom: 2px;
}

/* dropdown styling */

ul.dropdown {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left:0;
}

ul.dropdown ui.dropdown {
  top: 0;
  left: 95%;
}

ul.dropdown li {
  margin: 0;
  padding: 0;
  float: none;
  position: relative;
  list-style: none;
  display: block;
}

ul.dropdown li a {
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
}

和 JS

$('.dropdown').parent().mouseenter(function () {
    $('.dropdown', this).slideToggle('fast');
  });

$('.dropdown').parent().mouseleave(function () {
    $('.dropdown', this).slideUp('fast');
  });

所有这些都可以很好地将 UL 滑出 go_answers LI 下。

在 Firebug 中我运行以下命令:

$.get("shite.html", function(result){
    $("#go_archives").parent().append(result);
  });

加载shite.html

<ul class="dropdown">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
</ul>

它会更新 DOM(我认为这是正确的术语)，但是当我将鼠标悬停在“文件”链接上时，它不会滑出。

我缺少什么才能使其滑出？

Answer 1

你可以这样实现 .on() 方法:

$("#container").on({
    mouseenter: function (event) {    
       $('.dropdown', this).slideToggle('fast');
    },            
    mouseleave: function (event) {
       $('.dropdown', this).slideUp('fast');   
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".dropdown"
);