MVC, jquery, hoverIntent, Error: Object doesn't support this property or method

Question

I am having one heck of a time with hoverIntent. I keep getting "Error: Object doesn't support this property or method" popping up. If I change .hoverIntent to .hover, it "works". I've tried the regular file and the minified file and neither work. I downloaded them from here

I only have 2 scripts on the page. (this is in the MVC masterpage that I am trying to do this)

<script src="/Scripts/jquery-1.3.2.js"></script>
<script src="/Scripts/jquery.hoverIntent.js"></script>

<script type="text/javascript">


        $(document).ready(function() {
        $("#mailImage").hoverIntent(showMailHover, hideMailHover);
        });

            function showMailHover() {
                alert('Hover');
            }

            function hideMailHover() {
                alert('Leave');
            }

</script>

here's what my navigation item looks like that I'm trying to attach this this to.

<ul>
   <li id="mailImage">
    <img style="padding-top: 10px;" align="left" height="24" width="24" src="/content/images/icons/envelope.png" />
   </li>

...
</ul>

Ideally, I'm trying to create a drop down navigation. But, I can't get hoverIntent to work on my most basic tests in order to move forward with it. Any ideas on why this isn't working?

Answer 1

It looks correct, which would lead me to guess that there is a typo in your jquery.hoverIntent.js spelling or location...

Answer 2

Your syntax checks out - I just downloaded the plugin and created a quick local test with your script and HTML - so the problem is with your JS file reference(s). I recommend using FireBug's 'Script' tab to ensure both scripts are being references and loaded correctly.

Answer 3

What if you add the ul prefix?

Ie:

<ul id="ulID">
  <li id="mailimage" ...

then

$("#ulID li").hoverintent(...

Answer 4

Okay, I tried another masterpage and it worked fine. So I dug around and found out a slider control we were using had a reference in the control to the jquery file. That meant the page had 2 references to the same js file. I removed the second reference and all is well.

Thanks to all who offered their help.