Apply event listeners after dom content loaded with React

Question

A client wants to add their own event listeners to an app I've created. They will wait for the DOM content to load, then apply click handlers to certain elements in my app (to which I've added unique IDs).

However, it seems like React doesn't emit a window.onload or equivalent when all content is loaded, because currently my client is having to manually set a timeout in order to successfully apply the click handlers.

Here's what they've implemented:

<script>
    $(document).ready(function() {
        setTimeout(function(){
            $("#1button").click(function() {           
              location.href = $(this).attr("href");
            });
            $("#2button").click(function() {
              location.href = $(this).attr("href");
            });
        }, 1000); 
    });

</script>

AFAIK the jquery ready function is equivalent to document.addEventListener('DOMContentLoaded', ...) although I haven't yet asked them if they've tried this pure JS version.

At any rate, it seems like React isn't ready when the document is ready. Does React send out some other kind of even when it's finished loading? One that my client can listen for to then apply their click handlers.

If you are using react, why would you be doing this to add event listeners — epascarello, Jul 19 '21 at 16:13
Client is doing it, and client doesn't know React. It's a whole big thing that's gone back and forth in multiple iterations, and this is the only plausible solution. — crevulus, Jul 19 '21 at 16:19
makes no sense. If you have to do it, you should be using event delegation — epascarello, Jul 19 '21 at 16:19
https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Jul 19 '21 at 17:16

Apply event listeners after dom content loaded with React

0 Answers0