a element in nested divs, jquery events not working.

Question

i want to use an event of an anchor element in some nested div's but something is not working in my code.

i tried hundreds of variations on that selector but it still does not work.

html code:

<div class="tabContents">
  <div class="thumbArea">
  <a href="#">
    <img src="foo" alt="baba"/>
  </a>
  </div>
  <div class="imageArea">
  </div>
</div>

JS:

$(function(){

  $(".tabContents a").hover(function() {
  alert("just work!");
  });

}); 

Answer 1

It works for me.

Can you show us your CSS?

Answer 2

Your code -- copied character-for-character -- is working perfectly for me. (NOTE: Firefox on Windows.)

Try using firebug and see if it can help identify what's happening for you.

Answer 3

jQuery hover takes two functions, an "over" and an "out".

$(".tabContents a").hover(function() {
     alert("mouse over!");
   }, function(){
      alert("mouse out!");
});

If you're just looking for mouseover, I would suggest:

$(".tabContents a").mouseover(function() {
    alert("just work!");
});

Further Response:

Try using jQuery's live event. This will ensure that the event listener will also be paying attention for any new elements added to the DOM (like the ones you're appending). However, live does not currently support hover. You can do a mouseover and a mouseout event though to achieve the same effect.

$('.tabContents a').live('mouseover', function(){
   alert('mouseover!');
});

$('.tabContents a').live('mouseout', function(){
   alert('mouseout!');
});

I think I saw that somebody wrote an extension for jQuery that allowed for the use of 'hover' with live in a response to a question here on SO, so it can be done, but alas, I cannot seem to find it.

Answer 4

thanks for your interest everyone, alright, i think i figured what seems to be wrong..

in the actual code, i append some images wrapped with anchors into the div #thumbArea.

if i code it (an image wrapped with an anchor) directly into html, function works perfectly.

but when i try to "appendTo" the same thing, the events for the items that i created on runtime doesn't work.

any thoughts ?