在註冊表和登錄表單之間翻轉

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); 

});