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