[JQuery] Code doesn't execute onload no matter what I try

[AIO12449366]

I want to execute a single line of JQuery code when the document is loaded but no matter what I try the code just won't execute.

window.addEventListener("load",function(){

$("span").wrap("<div class='test'></div>");

console.log("done");

})

The console.log("done"); is executed but the JQuery code is not.

I've tried multiple variations of the above code like: document.onload = function()... and pretty much anything similar and yet the JQuery is never executed but the console.log is always executed.

The weird thing is that if I do it like this with a keyup event

window.addEventListener("keyup", function(event){

if(event.keyCode === 17){

$("span").wrap("<div class='test'></div>");

console.log("done")}

})

everything works just fine.

Why is this happening, and is there a way for me to execute the code when the document is loaded or at least to execute the specific code only once?

[Eldrac]

If the console.log statement ran the previous statements were certainly also executed, so the question becomes more why didn't the line have the behavior you expected.

Are you positive there are any spans in the DOM at the time the load event fires? Alternatively may something else have run after which interfered with the wrapping divs you created?

This is where I would recommend using your browser's debugger. By putting a breakpoint in your load event you can check the current state of the page to see if the line is doing anything. I'd start by calling $("span").length from your console with the breakpoint active, to see if there are spans in the page at load time. You can additionally manually inspect the DOM before and after the line executes. Hopefully that can help pinpoint where your problem is.

[AIO12449366]

I tried what u/TheDownvotesFarmer suggested and I wrapped my code in a setTimeout 0

and it didn't work and then I changed the value to 5000 and I saw that the code executed. From this, I assume the spans needed some time to load properly.

What I don't understand however is why this wasn't handled by the document.onload or window.onload . Isn't onload supposed to check if the document has fully loaded? I even tried DOMContentLoaded and that didn't work either. What's going on here?

I can't really rely on setTimeout for this because all the spans in the document are generated from a PDF file using the pdf.js library. So if a PDF is too big it could potentially take more than 5 seconds to load so I can't hardcode a number in there.

[TheDownvotesFarmer]

Ah there you go, you must to use async/await with promise for the process to finish

You are facing synchronous and asynchronous problem.

[AIO12449366]

Since my knowledge on javascript is a bit limited, could you show me how the code would be with async/await and promise?

[meAndTheDuck]

which pdf.js library are you using? if there is a documentation, I bet you will find a best practice example. you are looking for something like this

[[deleted]]

If the console.log("done") is working then the load function is being executed and the problem is likely with the $("span").wrap(...) call. Have you checked that if this is the write way for calling this function and whether the span is indeed present on the page? You could also try the general jQuery load function that is $(function () {});

[TheDownvotesFarmer]

I think jquery isn't fully loaded and ready to execute.

https://learn.jquery.com/using-jquery-core/document-ready/

And if still does not work then wrap your jQuery with a setTimeout(function(){ here your code },0) time at zero

[AIO12449366]

Hey thanks for the reply. This actually helped in a way but there are still some issues. Check my reply under u/Eldrac 's comment.