[Solved] Second Time jQuery Button Click event not working

Last Reply 5 months ago By dharmendr

Posted 5 months ago

second time button event not called

                $("#btnCreate").click(function (e) {
                    $.ajax({
                        type: "Get",
                        url: "/ClientMaster/AddClient",
                        success: function (response) {
                            $("#createContainer").html(response);
                            $('#ModelPopup').modal('show');
                            setTimeout(function () {
                                $(".btnSave").on("click", function () {                                   
                                    var formdata = new FormData($('form').get(0));
                                    var file = document.getElementById("Imagelogo").files[0];
                                    formdata.append("Logo", file);
                                    formdata.append("Imagelogo", $("#txtFile").file);
                                    formdata.append("ClientName", $("#ClientName").val());
                                    formdata.append("Address", $("#Address").val());
                                    formdata.append("Email", $("#Email").val());
                                    formdata.append("website", $("#website").val());
                                    formdata.append("ContactPerson", $("#ContactPerson").val());
                                    formdata.append("PhoneNumber", $("#PhoneNumber").val());
                                    $.ajax({
                                        url: '/ClientMaster/Create',
                                        type: "POST",
                                        data: formdata,
                                        processData: false,
                                        contentType: false,
                                        success: function (data) {

                                            if (data != 1) {
                                                $("#createContainer").html(data);
                                                 $('#ModelPopup').modal('show');
                                                return;
                                            }
                                          
                                            else {
                                                $('#ModelPopup').modal('hide');
                                                $.notify("Client Details Succesfully Added!", { align: "right", verticalAlign: "top", type: "success", background: "#20D67B", color: "#fff", });
                                               Listing();
                                            }
                                        },
                                        error: function (xhr, ajaxOptions, thrownError) {
                                            alert(xhr.error);
                                        }
                                    });
                                });
                            }, 500);
                        }
                    });
                });

 

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months ago

Hi SantoshC,

Your Button click event not working for second time because it will not be attached to the DOM after first click. So instead of your code, you should use something like this.

$("body").on("click", "#btnCreate", function(e) {
    $.ajax({
        type: "Get",
        url: "/ClientMaster/AddClient",
        success: function (response) {
            $("#createContainer").html(response);
            $('#ModelPopup').modal('show');
            setTimeout(function () {
                $(".btnSave").on("click", function () {                                   
                    var formdata = new FormData($('form').get(0));
                    var file = document.getElementById("Imagelogo").files[0];
                    formdata.append("Logo", file);
                    formdata.append("Imagelogo", $("#txtFile").file);
                    formdata.append("ClientName", $("#ClientName").val());
                    formdata.append("Address", $("#Address").val());
                    formdata.append("Email", $("#Email").val());
                    formdata.append("website", $("#website").val());
                    formdata.append("ContactPerson", $("#ContactPerson").val());
                    formdata.append("PhoneNumber", $("#PhoneNumber").val());
                    $.ajax({
                        url: '/ClientMaster/Create',
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (data) {
 
                            if (data != 1) {
                                $("#createContainer").html(data);
                                 $('#ModelPopup').modal('show');
                                return;
                            }
                           
                            else {
                                $('#ModelPopup').modal('hide');
                                $.notify("Client Details Succesfully Added!", { align: "right", verticalAlign: "top", type: "success", background: "#20D67B", color: "#fff", });
                               Listing();
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.error);
                        }
                    });
                });
            }, 500);
        }
    });
});