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

我将元素保存在窗口对象中是有原因的。在代码运行并跳过点击部分之后，我仍然有想要点击保存在窗口对象中的DOM元素。这意味着我可以运行

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

一次。令人惊讶的是，确实点击该元素，而确实会激活点击事件。它还返回DOM元素而不是jQuery-object。

enter image description here

图像在前两行显示失败的点击。第三行是我的手动输入，第四行是click（）的成功返回值。

我希望你能帮助我解决这个问题。

更新

.trigger（“click”）不幸地给出了相同的输出..

enter image description here

更新2

为了帮助您，我在子域名上提供了该网站。我知道你们很多人讨厌它，如果你不得不去另一页，但我希望你能原谅我，因为在我看来，这不能通过JSFiddle来解决。

链接为http://castor.marknijboer.nl。

点击一些页面打开后尝试关闭它们，你会看到我的意思。

Answer 1

不是模拟点击，为什么不从点击功能中拉出点击逻辑，只需使用执行业务逻辑所需的参数调用javascript函数？

Answer 2

在绑定return false;点击事件

时，最后尝试添加.castor-close

$(".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

您的代码正在运行但无法触发绑定到castor-close的点击事件，因为i标记为空。在其中加入一些文字并检查

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

<强> DEMO

Answer 4

您的点击处理程序要求点击目标应具有类castor-close，但是当您通过JavaScript调用click时，您将单击父元素（.castor-tab），并且单击处理程序不会。反应。

jQuery .click（）不会触发，但console.log显示输出

4 个答案: