表单提交后禁用jQuery选项卡

Question

我在AJAX加载的jQuery标签div中有一个表单：

<div id="tabs-2">
    <form id="frmLogin" name="frmLogin" class="cmxform" method="post" action="actions/login.php">
        <p>
            <label>Username</label>
            <input type="text" id="username" name="username" maxlength="30" />
        </p>
        <div class="clear"></div>
        <p>
            <label>Password</label>
            <input type="password" id="password" name="password" maxlength="40" />
        </p>
        <p>
        <input class="submit" type="submit" id="submit" value="Login" />
        </p>
        <div class="clear"></div>
    </form>

</div>

表单将提交到列出的PHP文件。 使用表单和验证jQuery插件的.js文件通过AJAX提交表单。 PHP文件回显JSON数据：

$(document).ready(function() { 
$("#frmLogin").validate({
                    rules: {
                            username: {
                                required: true,
                                minlength: 6
                            },
                            password: {
                            required: true,
                            minlength: 6
                            },
                            },
                            submitHandler: function(form) {
                                $("#frmLogin").ajaxSubmit({
                                                        dataType: 'json',
                                                        success:    processLogin,
                                                        })
                            }
});
function processLogin(data) {
    if (data.un) {
        $("div#tabs-2").slideUp(function() {
            $("li#login").html('<a href="ajax/loggedin.html">Welcome, '+data.fn+'</a>');
        });
    } else {
        alert("uh-oh"); 
    }
}
});

这一切都很好。 我有以前读为“登录”的链接以读回欢迎消息。 现在，我想用所有用户选项替换该选项卡的内容（登录表单）。

问题：带有欢迎消息的链接不再充当选项卡。 单击后，它将浏览器定向到“ ajax / loggedin.html”。

我尝试过重新设置“ loggedin.html”文件中的tabs函数，并在“ login.js”中的processLogin函数中调用它。 我的下一个修复尝试是在processLogin函数中更改tabs-2 div的html内容，但这似乎会生成很多笨拙的代码。

对防止禁用选项卡行为有何建议？

Answer 1

这是经典的“何时运行代码”问题。 您正在设置选项卡行为以检查并设置选项卡。 然后，您加载新代码，但尚未初始化这些标签。

解决方案是使用委托（或实时）代替直接单击事件，或初始化ajax回调中的选项卡。 后者是解决此问题的最佳方法。