在注册表和登录表单之间翻转

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功能click事件。 on函数还监听未来的元素（由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> 

Answer 2

您可以使用.on()委派这样的事件：

$(document).ready(function(){ 
    $(document).on('click', "#register_link, #login_link", function() { 
     $("#login_or_register") 
      .empty() 
      .load($(this).is('#register_link') ? "register_form.php" : "login_form.php"); 
    }); 
}); 

Answer 3

使用事件代表团考虑到不以可能被添加到DOM后运行时存在的元素：

$(document).on('click', '#register_link, #login_link').click(function() { 
    var url = $(this).is('#login_link') ? "login_form.php" :"register_form.php" ; 
    $("#login_or_register").empty().load(url); 

});