只有在页面加载后才调用javascript中的函数

Question

我有一个按钮，用来调用javascript函数来自动激活页面上的“选项卡”。当加载该选项卡时，会显示子选项卡。我正在尝试设置它，以便当单击按钮时，其中一个子选项卡也被自动激活。

目前，我可以获得第一个选项卡来选择，但我不能让子选项卡选择。#detailsTab是第一个选项卡的id。#个人信息是我试图选择的子选项卡的id。

以下是我所拥有的。

所有这些都在同一个文件中：

HTML：

<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>

Javascript：

<script type="text/javascript">
    function viewDetials() {
        $("#detailsTab").click();
        personalSubTab();
    }

    window.onload = function personalSubTab() {
        $("#personal-information").click();
    }
</script>

Answer 1

尝试将您的功能组合起来，并为子选项卡添加一个短的延迟。

function viewDetials() {
    $("#detailsTab").click();

    setTimeout(function(){
        $("#personal-information").click();
    }, 200);  // This value can be tweaked

}

Answer 2

当文档准备就绪时，将调用以下内容。

<script type="text/javascript">
    function viewDetials() {
        $("#detailsTab").click();
        personalSubTab();
    }

    function personalSubTab() {
        $("#personal-information").click();
    }

    // Document ready
    $(function () {
        personalSubTab();
    });
</script>

Answer 3

我不太清楚您想要做什么--但是如果您想在另一个按钮/div上生成一个单击事件，请使用触发器，而不是单击--如下所示：

function personalSubTab() {
$("#personal-information").trigger('click');}