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>

这是没有意义的，因为它包含了应该被jquery捕获的类“ajaxem”，但不是。

Answer 1

由于返回的链接href不包含“注册”或“密码”字样，因此均未满足以下条件：

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

...以及为什么可以从点击的锚点中提取网址时对网址进行硬编码？

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

live（），delegate（）和on（）在使用jQuery的几个ajax请求之后停止工作

1 个答案: