mouseover not working

Question

Hi ,

I have the following code which is not working
I create this div over a popup , normally there will be 20 divs like this on a popup.
i am trying mouseover its not working , if i give mousover event in the div itself its working.
any mistake.

<div dataindex="0" class="clstImages" id="dlstImages0"><img alt="Almond Branches in Bloom, San Remy, c.1890" title="Almond Branches in Bloom, San Remy, c.1890" src="http://imagecache5d.art.com/CropHandler/crop.jpg?img=21-2107-SA3ED00Z&amp;amp;x=0&amp;amp;y=0&amp;amp;w=400&amp;amp;h=400&amp;amp;size=2&amp;amp;maxw=100&amp;amp;maxh=100&amp;amp;mode=sq&amp;amp;q=100" id="eachimg">
</div>

$('.clstImages img').hover(function () {
    alert("mouseover");
}, function () {
    alert("mouseout")
});

Answer 1

Update <img> tags are self-closing so instead of <img src=".."> you should write <img src="..." /> Note the slash at the end.**

Use jQuery's live() method

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

$('.clstImages img').live("mouseenter", function () {
    alert("mouseenter");
});
$('.clstImages img').live("mouseleave", function () {
    alert("mouseleave");
});

Or when you create the <img>, assign a click event directly (this is probably a better approach).

Answer 2

Your hover function is fine but you need to wrap it in a $(document).ready() function.

I believe you are trying to run the script before the DOM has finished loading. Using $(document).ready() waits until the DOM is finished loading before executing its contents. Here is a reference to that function jQuery .ready()

Also you should remember to close your image tags

<img src="someimage" > is NOT valid HTML

<img src="someimage" /> is VALID HTML

Also you should remember to end your javascript statments. The following line was not terminated.

alert("mouseout") 

it should be

alert("mouseout");

Note the semi-colon at the end

Here is a working demo http://www.jsfiddle.net/R7KmW/

---

Edited

It seems your elements are not actually populated until you click on the directional arrow. You may want to try using live() or delegate(). basically these two Jquery Methods allow you to bind to future DOM element (elements that inserted using code ie AJAX, Dynamically Created Element). I know this type of answer was already posted for you but I really dont have any more time to debug your entire page for issues. I appologize for not providing a better answer but perhaps you can create a small test of just one image with the same features and try to debug that way.

$(document).ready(function () {
    $('.clstImages img').live('mouseover', function () { 
      alert("mouseover"); 
    })
    .live('mouseout', function () { 
      alert("mouseout");
    });
});