0

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...
    // ...
    // ...
}
ooziefixer
  • 29
  • 3
  • 1
    You need to do `$("#guest-shipping-address-body").on('click','input[type=checkbox]', function() {` in your `$(function() {` – mplungjan Feb 26 '21 at 21:23
  • i asked 3 questions, why question is marked as duplicate? Also i don't want to bound eventListener to parent element, as suggested in other thread, as this function should work with other many elements across page, bounding to document is the last resort – ooziefixer Feb 26 '21 at 21:38
  • 1
    My comment shows how to do this. You are advised to ask ONE question at a time. You can reuse functions but .delegate is deprecated and you use an ID in your delegation that looks very much like a container, delegate from the closest container and not from document unless you want every event to be passed through this very specific method. – mplungjan Feb 27 '21 at 07:25
  • i know about delegate()/on(), it's not relevant to questions i asked about life span of event listener with async code inside, recursive event creation and proper member call from inside parent object from inside event callback. AFAIU i can't just call this.ajaxHtml() as event callback function is placed in queue somewhere beyond my parent object scope? I think i'll need to find answer with details for this questions on some other sites, anyway, thanks atleast for that. I'll edit header of this thread as main questions are 3 below, not the dynamic html replacement itself, which i understand. – ooziefixer Feb 27 '21 at 10:55
  • 1
    If you call onPaymentToShipping more than once, then it is an antipattern to add delegation each time. You add delegation ONCE in the lifetime of the page – mplungjan Feb 27 '21 at 11:08

0 Answers0