PWA doesn't execute jQuery form on success event every time

Question

I have a working installable PWA. Here's my service worker's fetch code:

self.addEventListener('fetch', async e => {
    e.respondWith(
        fetch(e.request)
            .catch(error => {
                console.log(error);
                return caches.match(e.request) ;
            })
    );
});

In another JS file I have form handling logic (this file also registers the service worker):

  $("#myForm").submit(function (e) {
    console.log("form submit");
    let url = $(this).attr("action");
    let method = $(this).attr("method");
    let data = $(this).serialize();
    $.ajax({
    type: method,
    url: url,
    data: data,
    success: function (response) {
        console.log("SUCCESS");
    },
    error: function(err) {
        console.log(err);
    }
    });
});

The problem is that sometimes the form callback is not triggered, but the form submission is triggered every time (based on the "form submit" in console).

Answer 1

I think figured it out. I forgot to disable the generic form submission event. I added this in the event handling:

e.preventDefault();