[Blazor Question] How to still use client side addEventListener

I’m using a bootstrap template (metronic) which has for instance a menu that is collapsible. For that the template makes some plain javascript calls to bind the events. After adding the template to a Blazor solution, the events where not bound. In the original code they have a javascript like this. The code is included in myscripts.js which is referenced from the _Hosts.cshtml

element.addEventListener(type, handler);

This event does never fire. If I change the event registration to

$("body").on('click', "#myid", myfuction());

it works. So is there a way to still use addEventListener method with Blazor? Or is there anything else I need to make different?

[SteveSandersonMS]

document.getElementById can only return references to elements that exist within the DOM now. If a new matching element gets added later, that’s a new element and your code hasn’t added any event handlers to it yet.

The fact that elements can be added and removed dynamically is the whole reason why jQuery has the .on function. If you want to add event listeners to all current and future matching elements, then you should use .on or something like that.

This isn’t specific to Blazor but would apply to all technologies that modify the DOM dynamically.

There is a more idiomatic way to approach this in Blazor. Instead of putting your JS code directly inside your _Host.cshtml (where it can only run once), consider invoking the initialization logic from a Blazor component’s OnAfterRenderAsync method, so that component’s rendered elements get initialized whenever it is first rendered. Here’s a tutorial: https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/

[pranavkm]

@SteveSandersonMS could you have a look?