Question

The code below simply submits a form via Ajax and appends the result from the addNewUser.php script into a small popup window.

//activate the signup submit button
$('#button_signup_submit').click(function() {

    document.getElementById("popup_signup").style.display = "none";
    document.getElementById("popup_signup_step_two").style.display = "block";
    //submit the form info via ajax to addNewUser.php
    $.ajax({
         type: "POST",
         url: "ajax/addNewUser.php",
         data: { 
            username: document.forms["form_signup"]["username"].value,
            password: document.forms["form_signup"]["password"].value
         },
         datatype: "html",
         success: function(data){

                    var jqObj = jQuery(data);
                    $('#popup_signup_step_two').append(jqObj)
                }
    });

});

I can get the above script to append the ajaxed html into the original webpage no problem… but when I go to use my second piece of code:

//activate the second signup page's return button
$('#return_to_signup_form_from_ajax_popup').click(function() {
    alert("HEY");
    //erase innerHtml of popup_signup_step_two
    document.getElementById("popup_signup_step_two").innerHTML = "";
    document.getElementById("popup_signup_step_two").style.display = "none";

    //show the original signup form again, should contain user's original values
    document.getElementById("popup_background").style.display = "block";
    document.getElementById("popup_login").style.display = "block";

});

…which is a jQuery snippet that works with the newly added html… nothing happens. That second piece of code applies when the user forgets to enter a username or password and they are given this message via ajax:

<p>Go <span id="return_to_signup_form_from_ajax_popup">back</span> and enter a username and password.</p>

I assume this all has something to do with the DOM? But ultimately I have no idea. If anybody could even point me in the direction of what to look for I would greatly appreciate it.

Answer 1

Well, as long as you are sure the response is giving the proper html back – you should be doin alright. I would recommend changing your click handler to be a delegated handler instead – then you dont have to worry about if it was initialized before or after the ajax’d html was added to the live dom.

EDIT: updated to use latest jquery on method. (http://api.jquery.com/on/)

$('#containerElementThatAjaxdDataWillGoInto').on('click','#return_to_signup_form_from_ajax_popup', clickHandler );

EDIT: Here is a further attempt at clarity.

You are ajaxing in new html, and you are appending it to #popup_signup_step_two. Awesome. So this new html also has a button that needs to have a handler associated with it. To do this we need to delegate an event handler to #popup_signup_step_two so we can listen for all clicks on whatever element we want inside of that dom element.

$('#popup_signup_step_two').on('click', '#return_to_signup_form_from_ajax_popup', function() {
    // do stuff here
});

Now that you have this setup (inside a document ready), any click to the element #return_to_signup_form_from_ajax_popup inside of #popup_signup_step_two will call your click handler function. Now inside your current click handler, you set #popup_signup_step_two to display = none. So, if you want to do that action again, you need to make sure you set the element to display block.

I hope this helps more, if we are still missing eachother somewhere, this is the time to start getting things into a jsfiddle or give a link.