Javascript 悬停 addclass 在 Ajax 调用后不起作用

Question

我创建了一个菜单，当您将鼠标悬停在子项目上时，将显示一些内容。

唯一的问题是调用 Ajax 后。看起来javascript在这个Ajax调用中不起作用。

$.noConflict();
jQuery(document).ready(function($) {
$('.nav-menu li').hover(function() {
$(this).addClass('showcontentblock')
}, function() {
$(this).removeClass('showcontentblock')
});
});

Answer 1

你应该把你想要在Ajax调用后运行的代码放在Ajax方法的success、error或complete属性中。

$.ajax({
type: 'post',
url: "www.url.com",
success: function (response) {
// Run code on success
},
error: function (error) {
// Run code on error
},
complete: function () {
// Run code no matter the outcome
$('.nav-menu li').hover(function() {
$(this).addClass('showcontentblock');
});
}
});

Answer 2

如果元素在页面加载时或 AJAX 调用之前不存在，则可以使用$(document).on绑定事件侦听器，并将选择器作为第二个参数传递。这取代了遗留方法.live和.delegate

$.noConflict();
jQuery(document).ready(function($){
$('.nav-menu')
.on('mouseenter', 'li', function(){
$(this).addClass('showcontentblock');
})
.on('mouseleave', 'li', function(){
$(this).removeClass('showcontentblock');
});
});

我也同意应该只用 CSS 处理。

.nav-menu li:hover {
// copy+paste showcontentblock styles
}

您似乎正在动态添加这些菜单。尝试这种纯CSS方法的导航菜单。

.nav-menu {
background-color: #fff;
border-bottom: 1px solid #ddd;
display: sticky;
z-index: 1000;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li.sub-menu:hover > .nav-items {
display: block;
}
.nav-menu li a,
.nav-menu li span {
color: #131313;
display: block;
padding: 15px 10px;
text-decoration: none;
}
.nav-menu li.sub-menu > span {
padding-right: 30px;
}
.nav-menu li.sub-menu > span:after {
content: "f054";
font-family: "FontAwesome";
font-style: normal;
font-weight: 400;
font-size: 10px;
margin-top: 5px;
position: absolute;
right: 10px;
}
/* main navigation items */
.nav-menu > li.sub-menu > span:after {
content: "f078";
font-family: "FontAwesome";
margin-top: 4px;
}
.nav-menu li a:hover,
.nav-menu li span:hover {
background: #eee;
}
.nav-menu .nav-items {
display: none;
}
.nav-items {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 0 1px #e9e9e9, 0 1px 2px rgba(0,0,0, .1);
display: block;
left: 0;
list-style-type: none;
margin: 1px 4px 0 0;
padding: 0;
position: absolute;
width: 200px;
z-index: 9;
}
.nav-items li {
display: block;
}
.nav-items li a,
.nav-items li span {
display: block;
color: #131313;
padding: 10px;
}
.nav-menu .nav-items > li.sub-menu:hover > .nav-items {
display: block;
}
.nav-menu .nav-items .nav-items {
position: absolute;
left: 200px;
top: -1px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<ul class="nav-menu">
<li>
<a href="">
Home
</a>
</li>
<li class="sub-menu">
<span>Solutions</span>
<ul class="nav-items">
<li>
<a href="">Marketing</a>
</li>      
<li class="sub-menu">
<span>Products</span>
<ul class="nav-items">
<li class="sub-menu">
<span>Email Signatures</span>
<ul class="nav-items">
<li>
<a href="">Compliance</a>
</li>
<li class="sub-menu">
<span>Tracking</span>
<ul class="nav-items">
<li>
<a href="">Analytics</a>
</li>      
<li>
<a href="">GDPR</a>
</li>
<li>
<a href="">Reporting</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">Integrations</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Contact Us</a></li>
</ul>