jQuery .on() optimization guide for dynamically added form elements - events not firing
I'm upgrading from an older version and I'm trying to configure I'm working with an scenario with event delegation in jQuery where I'm trying to attach a submit event to dynamically added form elements. Initially, I added my form and the submit handler like this: ```javascript $(document).ready(function() { $('#myForm').on('submit', function(event) { event.preventDefault(); console.log('Form submitted!'); }); }); ``` However, I later append new form fields to `#myForm` using the following code: ```javascript $('#myForm').append('<input type="text" name="newField" />'); ``` After adding the new fields, when I submit the form, the submit event handler does not trigger. I tried binding the event after appending the new fields, but that didn't solve the scenario. The console shows no behavior messages, and the input fields seem to be added correctly. I've also tried switching to `.on('submit', '#myForm', function() {...})` but that didn't work either. I suspect it might have something to do with how jQuery handles events for elements that are not part of the DOM when the handler is attached. I'm using jQuery version 3.6.0. Any insights on how to properly handle this for dynamically added elements? Is there a better way to ensure the event is bound correctly? Any examples would be super helpful.