我已经搜索和试验了几个小时,我认为解决方案在于 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');
  });

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

在 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(我认为这是正确的术语)但是当我将鼠标悬停在 Archives 链接上时它不会滑出。

我错过了什么才能让它滑出?

最佳答案

当您像这样动态地重新加载 DOM 元素时,您需要重新附加事件。您应该将 mouseenter 和 mouseleave 命令放在一个函数中,并在文档准备好并在 get 内调用该函数。

我设置了一个 fiddle here 来演示如何设置它。您呈现的结果是我刚刚存储在隐藏 div 中的 ajax 调用的返回,当您单击测试按钮时,它会将 div 内容添加到您的列表项中。一旦新的 DOM 元素就位,我们将重新运行您的 jquery 以让选择器选择新元素,并在操作 css 类后获得预期的演示文稿,您的下拉列表可以工作。

总的一点是要记住,您分配给 Jquery 选择器结果的事件只会添加到那些在运行时匹配选择器的元素中。如果您将与选择器匹配的新元素插入到 DOM 中,这并不意味着您的新元素也会选择附加的行为。

关于jquery - 动态加载html后重新附加jquery函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12483381/

10-12 07:26
查看更多