Question

I have this issue where mouseover on a div (div.stripPopupTrigger) fires an AJAX call which gets some data and displays a popup box with that data. However, within that div is a span that has some text associated with it (see HTML below).

The issue is, when I mouseover the span and then out of the span into the div, the AJAX call fires again (kind of expected I guess). I’m looking to stop any triggers from span to div.stripPopupTrigger. Of course from any parent of div.stripPopupTrigger must fire as expected.

<div class='stripPopupTrigger cabinet-strip-type ".$type." ' style='background-color:".$color.";'>
<span class='cabinet-results-kw-value' style=''>".sprintf("%01.2f", $power)."</span><br />
  <span class='cabinet-results-kw-kw'>KW</span><br />
  <span class='cabinet-results-kw-name'>".$name."</span>
</div>

jQuery looks like below:

$('.stripPopupTrigger').live('mouseover', function() {

//some code here

$.ajax({            
  type: 'GET',  
  url: 'kwfinder/getdata',  
  data: 'strip=' + stripName,   
  success: function(data) {
    // some code here
  }
});

The .live('mouseout') event just adjusts CSS display to none. Hiding the popup box.

Answer 1

Try the mouseenter event instead of mouseover. It should do what you want.