在第一个完成后执行第二个 .click() 事件答案

【问题标题】：Execute a second .click() event after the first is done在第一个完成后执行第二个 .click() 事件
【发布时间】：2016-08-10 11:08:06
【问题描述】：

我想“链接”两个 .click() 调用，但无法使其工作。当我在浏览器中调试 JS 代码时，该代码确实有效（因此延迟似乎有效）

不知何故，我需要第一个 .click() 来加载页面（这是第一个事件所做的），并且只有在完成后，我才希望执行第二个 .click()。

我的代码：

$.post("settings?type=mail&nr=" + nr, function(data){
    if(data != ""){
        alert(unescape(data));

        // First click event -> realoads the page
        $("#change_settings").click();

        // Second click event -> navigates to a tab
        // inside the page loaded by the first click event
        $("#tab_mail_header" + nr + "").click();
    }
});

编辑：更多代码

function load_change_settings_view(e){
    e.preventDefault();
    $("#content").empty();
    // load settings.jsp in a div (test) inside the mainpage
    $("#content").load("settings.jsp #test", function(){
        // In here are a couple of .click() & .submit() functions but nothing else
    });
});     


$("#change_settings").click(function(e){
    load_change_settings_view(e);
});

编辑：我目前有这个代码：

$("#change_settings").click();
    window.setTimeout(function () {
        $("#tab_mail_header" + nr + "").click();
}, 1000);

虽然我不太喜欢它，因为它是一个定时延迟，而且（在慢速客户端上）1 秒超时可能是不够的。我不想将超时设置得太高，因为这会减慢客户端速度更快的用户的工作流程...

我看了几篇这样的帖子：

JQuery .done on a click event

Wait for a user event

How to wait till click inside function?

Wait for click event to complete

有人知道如何让它工作吗？

【问题讨论】：

如何“加载页面”？你的意思是通过ajax加载内容吗？然后你必须在你的ajax调用的成功回调函数中触发你的第二个事件。
调用页面重新加载后，不会执行任何操作。重构你的代码来解决这个问题。
您必须将 _GET 变量或其他内容传递到新页面，然后您可以使用该参数单击所需的选项卡。

标签： javascript jquery onclick

【解决方案1】：

经过几次尝试，我最终得到了以下解决方案：

代码片段#1

$.post("settings?type=mail&nr=" + nr, function(data){
    if(data != ""){
        alert(unescape(data));
        // create event object
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        // call method manually (not called by actual button click like its supposed to be)
        //   - pass event object
        //   - additional parameter to specify the tab the user is viewing
        load_change_settings_view(evt, "tab_mail_header" + nr);
    }
});

代码片段#2

function load_change_settings_view(e, p_tab){
    e.preventDefault();
    $("#content").empty();
    // load settings.jsp in a div (test) inside the mainpage
    $("#content").load("settings.jsp #test", function(){

        // Go to previous tab (if one was selected)
        var prev_tab = p_tab;
        if(typeof prev_tab != 'undefined'){
            $("#" + prev_tab).click();
        }
        // In here are a couple of .click() & .submit() functions but nothing else
    });
});

如果您对如何解决此问题有更好的想法或有任何其他建议，请随时发表评论

【讨论】：