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

Question

I have html elements with class "ajaxem" that are ment to be used in my jquery below. I also have the same for any form elements. For the first few ajax requests the jquery is attached and triggered and work properly. However, after a user logs in or registers, the returned links (which also have class="ajaxem") are not caught by jquery and not triggered.

I have tried all three implementations. and also tried to reapply them AFTER each ajax request. but none have worked.

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

the outputted html at which the scripts stop working is below:

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

which makes no sense since it includes the class "ajaxem" which should be caught by jquery but is not.

Answer 1

Since the returned link's href does not contain the words 'register' or 'password' neither of the following conditions are met:

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

so no ajax request happens.

You will probably need to account for the 'login' scenario, eg:

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

...and why hard-code the URLs when they can be extracted from the clicked anchor?

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