Как загрузить динамическую форму после одного щелчка еще раз в JQUERY? ⇐ Jquery

[Anonymous]

это мой скрипт для загрузки частичной формы для добавления нового адреса:
function handleLocationChange() {
var selectedLocationId = $(this).val();
var subLocationSelect = $(this).closest("form").find("#SubLocation_Id");
subLocationSelect.empty();

// That was fist script for showing for 1 page ( not Dynamic form)
$.ajax({
url: "/UserPanel/Home/GetDistrictGroup/" + selectedLocationId,
type: "GET",
dataType: "json", // Specify JSON dataType
success: function (data) {
$.map(data, function (item) {
subLocationSelect.append('' + item.stateName + '');
});
},
error: function () {
alert('Error occurred while loading districts.');
}
});
}

//** For Show click on AddNewAddress for First Form & reload partial Form again

$(document).ready(function () {

// Handle initial and dynamic forms change event in Location_Id of form
//.on is an order: change event on dynamic element: Here is Location_Id in handleLocationChange:

$("#addNewAddressContainer").on("change", "#Location_Id", handleLocationChange); // First was " $("#btnAddNewAddress").click(function () " But change for changing and LocationId

// Click event for adding new address
$("#btnAddNewAddress").click(function () {
var url = $(this).data("url");
$.ajax({
url: url,
type: 'GET',
success: function (data) {
$("#addNewAddressContainer").empty().append(data);
// Bind change event for Location_Id in dynamically loaded form
$("#addNewAddressContainer").find("form:last #Location_Id").change(handleLocationChange);
},

error: function () {
alert('Error occurred while loading the form.');
}
});
});

после загрузки формы у меня есть некоторые операции, такие как добавление нового адреса в базу данных, возврат на страницу и обновление представления с помощью ajax.

но после завершения отправки. ,кнопка опять не работает,значит если я на нее нажму она не работает . как я могу справиться с тем, что он работает во всех статусах, до щелчка и отправки и после нее?
// Handle form submission AddNewAddress Form

$("#addNewAddressContainer").on("submit", "form", function (e) {
e.preventDefault();

var $form = $(this);
var formData = $form.serialize();

$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: formData,
success: function (response) {
if (response.success) {
ShowMessage(response.message); // From My ShowMessage Method
$form.hide();

$('html, body').animate({ scrollTop: 0 }, 'fast');

// بعد از اضافه شدن آدرس جدید، لیست آدرس‌ها را به‌روزرسانی کنید
fetchAndUpdateAddressList();
} else {
ShowMessage(response.message);
}
},
error: function () {
ShowMessage('Error occurred while submitting the form.');
}
});
});

function fetchAndUpdateAddressList() {
$.ajax({
url: '/UserPanel/Home/GetClientContactInfoById', // تغییر دهید به کنترلر و اکشن مناسب
type: 'GET',
success: function (addresses) {
console.log(addresses); // بررسی کنید که آیا داده‌ها به درستی دریافت می‌شوند
var $addressListContainer = $("#addressListContainer"); // Select the container where addresses are displayed
$addressListContainer.empty(); // Clear the current list

// Check if there are addresses
if (addresses.length > 0) {
addresses.forEach(function (address) {
// Check for undefined values and set default values if needed
var addressValue = address.address || '';
var stateValue = address.state || '';
var districtValue = address.district || '';
var zipCodeValue = address.zipCode || '';
var locationIdValue = address.locationId || '';

var addressHtml = `













State


${stateValue}









District


${districtValue}









Zip Code






`;
$addressListContainer.append(addressHtml);
});
}

// Add the button to add new addresses
var addNewAddressHtml = `




Add New Address





`;
$addressListContainer.append(addNewAddressHtml);
},
error: function () {
ShowMessage('Error occurred while fetching addresses.');
}
});
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... -in-jquery