JQuery Mouseover for LI and children

Question

UPDATE: I'm an idiot. Forgot the delegate function. Posted my solution below.

Hey,

Working on a slide script. There is a set of rotating divs and associated LI elements. When the mouse comes over an LI element I'd like to jump directly to that div.

My LI Looks like this:

 <li id="infoBox_1" class="infoDefault">
<br>
<h3>Header</h3>
<p>Header</p>
</li>

The javascript is this:

$('.infoDefault').mouseover(function() {
    alert($(this).id);
    clearInterval(intervalFunc);
});
$('.infoDefault').mouseout(function() {
    startInterval();
});

My problem is, the script doesn't seem to be working right. The mouseover function doesn't seem to be recognized at all. Immediately the itnerval is restarted. I am guessing it is because the mouseover function can't catch the children elements iwthin the LI (Ie the H2 and P tag). But not sure. Can anoyne help?

Thanks

Answer 1

Nevermind found the answer. Need to use the delegate function

$("#slideList").delegate("li", "hover", function () {
    alert('test');
    clearInterval(funcInterval);

}, function () {
    startInterval();
});