Question

我有一个使用Bootstrap选项卡的界面，我试图在单击异步插入的链接时触发选项卡单击。（单击内容选项卡中的链接应触发选项卡更改。）我有一个有效的解决方案，但想知道为什么我的第一个解决方案没有。

这是我的HTML：

<div class="content-tabs">
    <a id="results-tab" class="tab active" href="#results-content" aria-controls="results-tab">Results</a>
    <a id="directions-tab" class="tab" href="#directions-content" aria-controls="directions-tab">Directions</a>
</div>
<div class="content-border-tab tab-content col-sm-12">
    <div id="results-content" class="tab-pane fade in active">
        <!-- 'Get Directions' links get inserted here with a class of 'directions' -->
    </div>
    <div id="directions-content" class="tab-pane fade">
        <!-- driving directions are inserted here via JS -->
    </div>
</div>

这是我破解的Javascript：

$('#results-content').on('click', '.directions', function(e) {
    $('#directions-tab').click();
});

$('.content-tabs a').click(function(e) {
    // do whatever
});

我有一个可行的解决方案，我只是不明白为什么上面的代码不起作用，以下代码可以：

$('#results-content').on('click', '.directions', function(e) {
    var click = new MouseEvent('click', {});
    document.getElementById('directions-tab').dispatchEvent(click);
});

$('.content-tabs a').click(function(e) {
    // do whatever
});

感谢您的帮助;谢谢！

Answer 1

您的工作示例添加了一个新的单击处理程序，当您添加新内容并在每次重新附加时也会将其删除，但是您应该能够像下面的示例一样绑定它并且应该可以工作。

$(document).on('click', '#results-content .directions', function(e) {
    $('#directions-tab').click();
});

jQuery .click（）没有在.on（）中触发

1 个答案: