javascript - 使用 jQuery 进行几次 ajax 请求后，live()、delegate() 和 on() 停止工作

Question

我有类“ajaxem”的 html 元素，将在下面的 jquery 中使用。对于任何表单元素我也有相同的。对于前几个 ajax 请求，jquery 已附加并触发并正常工作。但是，用户登录或注册后，返回的链接(也有 class="ajaxem")不会被 jquery 捕获，也不会被触发。

我已经尝试了所有三种实现。并尝试在每次 ajax 请求后重新应用它们。但都没有奏效。

<script type="text/javascript">
function updateajaxem() {


    $(document).on("click", "a.ajaxem", function (e) {
        e.preventDefault();

        var action = $(this).attr('href');
        //alert(action);
        if (action.indexOf('register') > 0) {

            $("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn();

        } else if (action.indexOf('password') > 0) {
            $("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn();

        }

    }); //end 
}
</script>
<script type="text/javascript">
 updateajaxem();

//$("a.ajaxem").live("click", function(e){ 

$(document).on("click", "input:submit", function (e) {
    e.preventDefault();

    var formaction = $(this).closest('form').attr('action');
    var dataString = $(this).closest('form').serialize();
    alert(dataString);
    //$("div#logininfo").load(formaction,data);
    $.ajax({
        type: "POST",
        url: formaction,
        data: dataString,
        //   dataType: "json",
        success: function (data) {
            alert(data);

            $("div#logininfo").html(data);
            updateajaxem();


        } // end of success
    });





});
</script>

脚本停止工作的输出 html 如下:

<div id="container">
    <h1>Welcome to CodeIgniter!</h1>
<a href="auth/logout/">Logout</a> <a href="">Home</a>
    <div id="body">
        <p>The page you are looking at is being generated dynamically by CodeIgniter.</p>

        <p>If you would like to edit this page you'll find it located at:</p>
        <code>application/views/welcome_message.php</code>

        <p>The corresponding controller for this page is found at:</p>
        <code>application/controllers/welcome.php</code>

        <p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
    </div>

    <p class="footer">Page rendered in <strong>1.0343</strong> seconds</p>
    <div id="logininfo">You have successfully registered. <a href="http://localhost/testrun/auth/login" class="ajaxem">Login</a></div>
</div>

这没有任何意义，因为它包含类“ajaxem”，该类应该被 jquery 捕获，但没有被捕获。

Answer 1

由于返回的链接的 href 不包含“register”或“password”一词，因此不满足以下条件:

if (action.indexOf('register') > 0) {
    $("div#logininfo").load("http://localhost/testrun/auth/register/").fadeIn();
} else if (action.indexOf('password') > 0) {
   $("div#logininfo").load("http://localhost/testrun/auth/forgot_password/").fadeIn();
}

所以不会发生ajax请求。

您可能需要考虑“登录”场景，例如:

} else if (action.indexOf('login') > 0) {
   $("div#logininfo").load("http://localhost/testrun/auth/login/").fadeIn();
}

...当可以从单击的 anchor 中提取 URL 时，为什么还要对 URL 进行硬编码？

if (action.indexOf('register') > 0) {
    $("div#logininfo").load(this.href).fadeIn();
} else if (action.indexOf('password') > 0) {
   $("div#logininfo").load(this.href).fadeIn();
} else if (action.indexOf('login') > 0) {
   $("div#logininfo").load(this.href).fadeIn();
}