Add Event bubbling...

[dkimbell13]

Your events do not bubble up! document.querySelector(this.wz_class).dispatchEvent(new CustomEvent("wz.update", { detail: { "target": this.wz_class, "elem": document.querySelector(this.wz_class) } }));

could/should be something like... document.querySelector(this.wz_class).dispatchEvent(new CustomEvent("wz.update", { bubbles: true, //Enable bubbling detail: { "target": this.wz_class, "elem": document.querySelector(this.wz_class) } }));

This is prevalent throughout your event dispatching. Please ensure that events bubble, so we don't have to add event handlers directly to the .wizard class element, and instead can bind to the document, with a reference to the .wizard, in the cases where we are dynamically adding a form wizard to our web page.

Thanks!

[AdrianVillamayor]

Hi @dkimbell13,

I want to sincerely apologize for the time it took to address this issue, and I truly appreciate your patience throughout the process.

I’ve updated Wizard-JS so that event bubbling is now enabled by default (bubbles: true). This change allows events to automatically propagate through the DOM, making it easier to handle events at different levels without needing extra configurations. Of course, if you prefer to disable bubbling for specific events, you can still adjust this through the configuration options.

You have it all documented in the Readme.me and in the Changelog.

I hope this update resolves the issue you were facing, but if there’s anything else you need or if you have any further questions, please don’t hesitate to reach out.

Thank you very much for your help 🙌🏻.