jQuery .click()不会在.on()中触发

jQuery .click() not firing inside .on()

本文关键字：on click jQuery      更新时间：2023-09-26

我有一个使用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
});

感谢你的帮助;谢谢!

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

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