Using Jquery in Custom JS script

I have a custom js script which I pointed to using app_include_js in hooks.py

console.log("page is fully loaded");
    $("[data-fieldname='owner']").hide()

console.log executes but the jquery doesnt
I can run the jquery on the browser console successfully

Things I have tried
1.using event listener

window.addEventListener("load", (event) => {
    console.log("page is fully loaded");
    $("[data-fieldname='owner']").hide()
});
  1. wrapping it in a function
function page_changed(event) {
    //waiting for page to load completely
    frappe.after_ajax(function () {

     
  console.log("page_changed")
$("[data-fieldname='owner']").hide()
$(".list-row-col").length
   
})
}

then calling the function
$(window).on('load', page_changed);

$(window).on('hashchange', page_changed);

  1. using frappe.router
frappe.router.on(
    "change", page_changed)

the results were the same,
the jquery did not work