Register event in dynamic component

#1

My case:
There is website where is modal. Nothing special. But the content of modal it’s separate livewire component which is dynamic loading after click “Show modal” button. Modal works fine.
Problem is with events which are inside of modal content view like:

<script>Livewire.emitTo('pages', 'edit');</script>

or

<script>Livewire.on('mydata', data => { console.log('event test') });</script>

in moment when modal is loading on js console appears:

Livewire.on is not a function …

or

Livewire.emitTo is not a function …

Generally I know why this issue happen. Because content with my events is loaded after DOM is ready and after when Livewire registered all events inside DOM.

And the question is:
Is there any chance to register event in Livewire dynamicly?

I hope it’s will make sense for you :slight_smile:

#2

Livewire.on is not a function
make sure you have the livewire.js is loaded, usually is enough using @livewireScripts. you can try to use window.Livewire.on()

Please check this Livewire Reference.

Yes. you can have listeners and event dynamically.
Replace the protected property $listeners and use getListeners() method.