jQuery .click（）不在.on（）內部觸發

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();
});