Can somebody help me, i need to replace HTML content of element inside DOM using jQuery ajax. The EventListener, from which i call this replacement is tied to one of the inner elements inside html that is about to be replaced, so i need to register new eventListener after replacement and i need to do it after 2 consecutive ajax requests.
Does such code breaks anything?
1.It seems to work, but i do not know, is this event listener lives until all async code is run inside it?
2.Is creating another EventListener recursively is ok and doesn't interrupt current one?
3.Also, i'm new to javascript and jquery, how to properly call function from inside object "c" in my case and from inside jquery.delegate callback at the same time? is it ok to do like i did? Like "c.ajaxHtml();"
const c = {
// ...
onPaymentToShipping: function() {
$(document).delegate('#guest-shipping-address-body input[type=\'checkbox\']', 'click', function() {
if(this.name == "shipping") {
if(this.checked){
c.ajaxPaymentToShipping();
const hideCrap = document.querySelector('.collapsible');
if(hideCrap){
hideCrap.style.display = 'none';
}
}
else{
(async function() {
//saves data via jQuery ajax
await c.ajaxPaymentToShipping();
// uses stored data via jQuery ajax, creates new html template and replaces html, where current EventListener is tied to one of inner elements
await c.ajaxHtml();
// edit stuff in new html elements using ajax, nothing important, can be run asyncronously
c.onCountryChange();
// call same function (recursively once?) to register same eventListener, but for newly created element.
c.onPaymentToShipping();
})();
}
}
});
},
// other stuff...
// ...
// ...
}