Question

当页面加载时，一切都很完美。但是，在我发出改变我的标签菜单内容的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>

这是改变它的ajax请求：

function calculate(id) {
    $.ajax({
        url: 'calculator.php',
        type: 'get',
        data: { 'id': id },
        success: function(data) {
            $('#stats').html(data);
        }
    });
}

Answer 1

因为你正在替换元素，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);
   // ...
});

在ajax请求之后，选项卡菜单不再工作

1 个答案: