Jquery ajax请求后选项卡菜单不再工作

当页面加载时，一切都正常工作。然而，在我发出ajax请求更改选项卡菜单内容之后，它就不能正常工作了。我能做些什么使它始终工作

这是我的选项卡菜单jquery代码：

$('ul.stat-nav').each(function(){
    var $active, $content, $link = $(this).find('a');
    $active = $($link.filter('[href="'+location.hash+'"]')[0] || $link[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    $link.not($active).each(function () {
        $(this.hash).hide();
    });

    $(this).on('mouseover', 'a', function(e){
        $active.removeClass('active');
        $content.hide();
        $active = $(this);
        $content = $(this.hash);
        $active.addClass('active');
        $content.show();
        e.preventDefault();
    });
});

我的选项卡菜单html代码：

<div id="stats" class="right-stat">
    <ul class="stat-nav">
        <li class="stat-nav-tab"><a href="#W1">Basic</a></li>
        <li class="stat-nav-tab"><a href="#W2">Offensive</a></li>
        <li class="stat-nav-tab"><a href="#W3">Defensive</a></li>
        <li class="stat-nav-tab"><a href="#W4">Regeneration</a></li>
    </ul>
    <div class="wrap" id="W1"></div>
    <div class="wrap" id="W2"></div>
    <div class="wrap" id="W3"></div>
    <div class="wrap" id="W4"></div>
</div>

---

这是因为您正在替换元素，JavaScript的工作方式与CSS不同，因为元素不存在，所以侦听器无法工作。您应该创建一个函数，并在重置html内容后调用它。另一个更具动态性的选项是使用事件委派，而

index

方法可以帮助您找到目标元素

var $stats = $('#stats').on('mouseenter', '.stat-nav a', function() {
   var index = $stats.find('.stat-nav a').index(this);
   var $target = $stats.find('.wrap').eq(index);
   // ...
});

---

带有$（'#stats'）.html（数据）；你毁了你的标签。我不知道ajax的结果是什么样的。当它与以前的dom相同时，您可能只需要重新设置选项卡就可以创建一个函数，并在重置html内容后调用它。另一个更具动态性的选项是使用事件委派，

index

方法可以帮助您找到目标元素。谢谢我按照你们说的做了，现在它工作得很好：）

var $stats = $('#stats').on('mouseenter', '.stat-nav a', function() {
   var index = $stats.find('.stat-nav a').index(this);
   var $target = $stats.find('.wrap').eq(index);
   // ...
});