在Ajax调用后Javascript悬停addclass无法正常工作

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>