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

Question

I'm having a problem in my code where I click a DOM-element using JavaScript. The click does not work and I am almost sure it is no dumb programming mistake (always dangerous to say).

After deleting some DOM-elements I want my code to click an element and trigger its onclick event. However this doesn't work. According to my code the event triggers but the event doesn't happen and the click event returns the jQuery object.

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

The onclick event:

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

I saved the element in the window object for a reason. After the code runs and it skips the click-part I still have the DOM-element i want to click saved in the window object. This means I can run

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

again. Surprisingly this does click the element and this does activate the click-event. It also returns the DOM-element instead of the jQuery-object.

The image shows in the first two lines the failed click. The third line is my manual input and the fourth line is the successful return value of the click().

I hope you can help me to solve this.

UPDATE

.trigger("click") unfortunately gives the same output..

UPDATE 2

To help you i made the website available on a subdomain. I know many of you hate it if you have to go to a different page but I hope you'll forgive me because in my opinion this cant be solved through JSFiddle.

The link is http://castor.marknijboer.nl .

After clicking some pages to open try closing them and you'll see what i mean.

Answer 1

除了模拟点击之外，为什么不直接将点击逻辑从点击函数中拉出来，而仅使用执行业务逻辑所需的参数调用javascript函数呢？

Answer 2

try adding return false; at the end, when binding .castor-close click event

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

Your code is working but not able to trigger click event binded to castor-close because i tag is empty. Put some text in it and check

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

DEMO

Answer 4

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