javascript - 在注册和登录表单之间切换

Question

 <script>
$(document).ready(function(){
    $("#register_link").click(function()
    {
        $("#login_or_register").empty();
        $("#login_or_register").load("register_form.php");
    });
    $("#login_link").click(function()
    {
        $("#login_or_register").empty();
        $("#login_or_register").load("login_form.php");
    });
});

</script>

这是我用于在登录和注册表单之间切换的 jquery 代码。 该页面最初包含登录表单和加载注册表单的链接。它第一次加载注册表格和加载登录表格的链接。但在那之后它不起作用。它不会从注册表更改为登录表单。如何纠正这个问题？

Answer 1

这是因为监听器仅在现有元素上设置。当您使用 Ajax (jQuery.load()) 加载某些内容时，这些新元素将不会有监听器。您可以在加载新内容后通过重新初始化点击监听器来修复它，如下所示:

<script>
    function listenToClick() {
        $("#register_link").click(function() {
            $("#login_or_register").empty();
            $("#login_or_register").load("register_form.php", function() {
                listenToClick();
            });
        });

        $("#login_link").click(function() {
            $("#login_or_register").empty();
            $("#login_or_register").load("login_form.php", function() {
                listenToClick();
            });
        });
    }

    $(document).ready(function(){
        listenToClick();
    });
</script>

更好的选择是使用 on 监听点击事件功能。 on函数还监听 future 的元素(由 jQuery.load() 创建的元素)。

<script>
    $(document).ready(function() {

        $("#register_link").on('click', function() {
            $("#login_or_register").empty();
            $("#login_or_register").load("register_form.php");
        });

        $("#login_link").on('click', function() {
            $("#login_or_register").empty();
            $("#login_or_register").load("login_form.php");
        });

    });
</script>