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），并且点击处理程序不响应。