live(）、delegate(）和on(）在使用jQuery发出几次ajax请求后停止工作

live(), delegate(), and on() stop working after few ajax requests using jQuery

本文关键字：几次 请求 停止工作 ajax delegate on live jQuery      更新时间：2023-09-26

我有类为"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捕获，但没有。

由于返回链接的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();
}

当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();
}
相关文章：