jQuery .click（）不會觸發，但console.log顯示輸出

Question

我在使用JavaScript單擊DOM元素的代碼中遇到問題。 單擊不起作用，我幾乎可以確定這不是愚蠢的編程錯誤（總是很危險地說）。

刪除一些DOM元素后，我希望代碼單擊一個元素並觸發其onclick事件。 但是，這不起作用。 根據我的代碼，事件會觸發但事件不會發生，而click事件會返回jQuery對象。

HTML：

<div class="castor-tabs">
  <div class="castor-tab" data-path="../SiteBuilding/alertbox.js" data-saved="saved" data-editor="5475c897f1900editor">
    <span class="castor-filename">alertbox.js</span>
    <span class="castor-close"><i class="fa fa-fw fa-times"></i></span>
  </div>
  <div class="castor-tab" data-path="../SiteBuilding/index.php" data-saved="saved" data-editor="5475c89903e70editor">
    <span class="castor-filename">index.php</span>
    <span class="castor-close"><i class="fa fa-fw fa-times"></i></span>
  </div>
  <div class="castor-tab active" data-path="../SiteBuilding/makesite.php" data-saved="saved" data-editor="5475c8997ac77editor">
    <span class="castor-filename">makesite.php</span>
    <span class="castor-close"><i class="fa fa-fw fa-times"></i></span>
  </div>
</div>

JavaScript的：

$(".castor-tabs").on("click", ".castor-close", function() {
    var tab = $(this).parent();
    if(tab.attr("data-saved") == "saved") {
        // File is saved

        if($(".castor-tab").length > 1) {
            // 1 element is 'tab' the other is a second tab
            if(tab.next().length > 0) {
                // If element is to the right
                window.newTab = tab.next();
            } else if(tab.prev().length > 0) {
                // If element is to the left
                window.newTab = tab.prev();
            }
        } else {
            window.newTab = false;
        }

        var editor = tab.attr("data-editor");
        $("#" + editor).remove(); // textarea linked to CodeMirror
        $("#" + editor + "editor").remove(); // Huge CodeMirror-element
        tab.remove();

        if(window.newTab) {
            console.log("window.newTab.click()");
            console.log(window.newTab.click()); // Simulate click()
        }
    } else {
        // File isn't saved
    }
});

onclick事件：

$(".castor-tabs").on("click", ".castor-tab", function() {
    $(".castor-tab.active").removeClass("active");
    $(this).addClass("active");
    var editor = $(this).attr("data-editor");
    $(".CodeMirror").hide();
    $("#" + editor).show();
});

我將元素保存在window對象中是有原因的。 在代碼運行並跳過單擊部分之后，我仍然想將要單擊的DOM元素保存在window對象中。 這意味着我可以跑步

console.log(window.newTab.click());

再次。 令人驚訝的是，這確實單擊了元素，並且確實激活了點擊事件。 它還返回DOM元素而不是jQuery對象。

該圖像在前兩行顯示失敗的單擊。 第三行是我的手動輸入，第四行是click（）的成功返回值。

我希望你能幫助我解決這個問題。

UPDATE

.trigger（“ click”）不幸地提供了相同的輸出。

更新2

為了幫助您，我在子域上提供了該網站。 我知道許多人討厭它，如果您必須轉至另一個頁面，但我希望您能原諒我，因為在我看來，這無法通過JSFiddle解決。

鏈接是http://castor.marknijboer.nl 。

單擊某些頁面以打開后，嘗試關閉它們，您將明白我的意思。

Answer 1

除了模擬點擊之外，為什么不直接將點擊邏輯從點擊函數中拉出來，而僅使用執行業務邏輯所需的參數調用javascript函數呢？

Answer 2

嘗試添加return false; 最后，當綁定.castor-close click事件時

$(".castor-tabs").on("click", ".castor-close", function() {
    var tab = $(this).parent();
    if(tab.attr("data-saved") == "saved") {
        // File is saved

        if($(".castor-tab").length > 1) {
            // 1 element is 'tab' the other is a second tab
            if(tab.next().length > 0) {
                // If element is to the right
                window.newTab = tab.next();
            } else if(tab.prev().length > 0) {
                // If element is to the left
                window.newTab = tab.prev();
            }
        } else {
            window.newTab = false;
        }

        var editor = tab.attr("data-editor");
        $("#" + editor).remove(); // textarea linked to CodeMirror
        $("#" + editor + "editor").remove(); // Huge CodeMirror-element
        tab.remove();

        if(window.newTab) {
            console.log("window.newTab.click()");
            console.log(window.newTab.click()); // Simulate click()
        }
    } else {
        // File isn't saved
    }

    return false;
});

Answer 3

您的代碼正常工作，但由於i標記為空，因此無法觸發綁定到castor-close點擊事件。 在其中放一些文字並檢查

<span class="castor-close"><i class="fa fa-fw fa-times">Click me</i></span>

DEMO

Answer 4

您的點擊處理程序要求點擊目標應具有Castor-close類，但是當您通過JavaScript調用click時，您單擊的是父元素（.castor-tab），並且點擊處理程序不響應。