JQuery not finding page elements

Question

On this page:

http://www.lesmills.com/westcoast/clubs-and-facilities/facilities-and-health-clubs.aspx#

When you mouse over the magnifying glass in the top-right corner, it's supposed to pop up a search box. The reason it's not working is that JQuery can't find the element with id="search" that it needs to attach the mouseover event to. You can see this if you click F12 to bring up the developer tools in the browser and look at the 'console' tab of the developer tools. The feature is working on this page:

http://www.lesmills.com/westcoast/instructors/instructors.aspx

• Selecting any element with a JQuery selector isn't working
• If I use the standard JavaScript getElementById I can find the element, but using a JQuery selector doesn't work.
• I've tried commenting out various different included JavaScripts, and making JQuery the 1st thing included on the page
• I've compared the working and broken code that gets rendered to the browser. I've looked at any differences and tried commenting out or including lines to get the broken code to more closely match the working source code - still can't get it to work
• I've tried commenting out various other included JavaScripts

I've been looking at this for a few hours, any ideas?

Answer 1

Since $ != jQuery in the page... either use jQuery(selector) instead of $(selector) or use an IIFE

(function($){
    //here $ is jQuery
})(jQuery)

if you are using dom ready handler

jQuery(function($){
        //here $ is jQuery
})

Answer 2

The $ function on ASP.net pages, by default, is not jQuery. It is a function defined by ASP.net.

jQuery is loaded on the page, however, and can be accessed by using the full word jQuery, as in jQuery('div.promo-panel').