仅在页面加载后在javascript中调用函数

Question

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.

Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.

The following is what I have.

This is all in the same file:
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

Try combining your functions and adding a short delay for the subtab.

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

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

}

Answer 2

The following will be called when the document is ready.

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

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

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

Answer 3

I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:

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