JavaScript跳过代码（因为JavaScript引擎忙吗？）

Question

I encountered a problem in my code when I try to execute some code after my JavaScript removes a lot of DOM-elements.

I am developing an webapplication named Castor. It is a code editor and it works pretty well. The problem is that i'm having an error after I closed an editor tab. I want the editor to select one tab after closing another. Unfortunately this doesn't work. The code near the removing of the DOM-elements doesn't get executed.

HTML

<div class="castor-tabs">
    <div class="castor-tab" data-path="../KeerpuntMobile/script/functions.php" data-saved="saved" data-editor="5475045011989editor">
        <span class="castor-filename">functions.php</span>
        <span class="castor-close"><i class="fa fa-fw fa-times"></i></span>
    </div>
    <div class="castor-tab" data-path="../KeerpuntMobile/script/jquery-1.10.2.min.js" data-saved="saved" data-editor="54750453e81a3editor">
        <span class="castor-filename">jquery-1.10.2.min.js</span>
        <span class="castor-close"><i class="fa fa-fw fa-times"></i></span>
    </div>
    <div class="castor-tab active" data-path="../KeerpuntMobile/script/functions.js" data-saved="saved" data-editor="54750457a94f6editor">
        <span class="castor-filename">functions.js</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
                    tab.next().click();
                    console.log(tab.next().attr("data-editor"));

                } else if(tab.prev().length > 0) {

                    // If element is to the left
                    tab.prev().click();
                    console.log(tab.prev().attr("data-editor"));

                }
            }

            var editor = tab.attr("data-editor");
            $("#" + editor).remove(); // textarea linked to CodeMirror
            $("#" + editor + "editor").remove(); // Huge CodeMirror-element
            tab.remove();
        } else {
            // File isn't saved
        }
    });

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

If I click on the cross of the middle tab the editor disappears, the tab disappears, I get an output in my console, but none of the other tabs get clicked.

The output of the console.log is "54750457a94f6editor".

This shows that tab.next() represents the the tab with the filename 'functions.js' which is the right one.

I've replaced the $(element).click() with $(element).trigger("click") and it didn't help. I even pasted the whole click-event code in this if-statement but nothing seems to work. I hope you can help me with a solution.

Answer 1

See http://jsfiddle.net/vyL49LLk/ with awesome css. You just need to add a space to your selector, change

$(".castor-tab.active").removeClass("active");

to this:

$(".castor-tab .active").removeClass("active");

$(".castor-tab.active") is looking for elements which have both castor-tab and active classes. $(".castor-tab .active") will look for elements which has class active and are descendants of castor-tab .

Answer 2

how about changing this line:

 tab.next().click();

to this line:

 tab.next().children(':eq(0)').click(); // credit to Felix Kling for his comment

it seems like tab is the PARENT of the element with the click listener, so activating a click on the PARENT has no effect at all. i assume that the desirable div is the first child of that parent