Filling multiple divs with single ajax() call, form submit button fails

Question

The short question is when I fill a <div> containing a type=submit button the .click(function(){...} function fails.

What I'm doing is this, #formDialogButton opens #accordion populated by .ajax() containing #userForm with an input type=submit . When client clicks submit it is supposed to fire .ajax() where php does database stuff and returns one of the #userform .

            $(".formDialogButton").click(function(){
            var userDialog = "#" + this.id + "Dialog";
            $("#userForm, #siteForm, #limitForm").html("<img src='ajax-loader.gif' />");
            $("#userForm, #siteForm, #limitForm").load("ajax.php", {op: "forms"}, function(responseTxt,statusTxt,xhr){
                $("#userForm").html($("#user").html());
                $("#siteForm").html($("#site").html());
                $("#limitForm").html($("#limit").html());
                if(statusTxt=="success") {
                    $(userDialog).dialog({
                        autoOpen: false,
                        draggable: true,
                        modal: true,
                        resizable: true,
                        width: 700,
                        position: { within: "#mainContent" }
                    });
                    $(userDialog).dialog("open");
                    $( "#accordion").accordion({ 
                        collapsible: true,
                        heightStyle: "content",
                    });
                };
                if(statusTxt =="error")
                    alert("Error: "+xhr.status+": "+xhr.statusText);
            });
        });  

This is working and returns a <input class="submitAndReturn" type="submit" value="Submit" /> in the form. But I can't "find" it to do anything.

            $(".submitAndReturn").click(function() {
        alert ('this is where I call my regular .formSubmitButton and let  success: function() do a .formDialogButton ');
        });  

I'm a total self taught amateur so please forgive me and try to help. Thanks

Answer 1

Sounds like you are trying to add the click event before the element is loaded on the page. Change

$(".submitAndReturn").on("click", function() {
    alert ('as .submit and return is dynamically loaded. so, use on function');
}); 

to

$(document).on("click", ".submitAndReturn", function(e) {
    e.preventDefault(); //cancel the click action if needed
    alert ('as .submit and return is dynamically loaded. so, use on function');
}); 

Answer 2

    $(".submitAndReturn").on("click", function() {
    alert ('as .submit and return is dynamically loaded. so, use on function');
    });  

Answer 3

What I'm doing is this, #formDialogButton opens #accordion populated by .ajax() containing #userForm with an input type=submit

If I understand it correct .formDialogButton DOM element is getting loaded in .ajax() callback event.

If you are loading the javascript in question above in header or at the page end, most likely the $(".formDialogButton").click(function() event is not getting attached to DOM.

This happens because the script has already fired before the AJAX has fetched the required DOM to which event has to be attached. You would need to attach the event in .ajax() success callback. Something like

$.ajax({
  url: 'YOUR_URL_TO_FETCH_FORM',
  success: function(data) {
    // associate click
    $(".formDialogButton").click(function() // rest of the code
  }
});