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