jQuery .each() metodo non funziona in Firefox

Question

Ho un metodo che sto sfruttando per lanciare un suggerimento relativo allo <td> all'interno. Tutto funziona alla grande in IE, Chrome, Safari, ma a Firefox mancano completamente tutti i metodi e viene avviato solo l'ultimo suggerimento nel DOM.

Cosa dà?

http://jsfiddle.net/yus5b/

HTML:

<div class="stage"> 
    <div class="dealFinder"> 
     <h2 class="title">Deal Finder in Your Area</h2> 
     <table cellpadding="5"> 
      <tr> 
      <td class="text"> 
       <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span>Your Price $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
       <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     <tr> 
      <td class="text"> 
      <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p> 
      <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a> 
      <div class="tooltip"> 
       <div class="inner"> 
       <b>2012 Land Rover Range Rover Evoque</b> 
       <span><small>Your Price</small> $19,330</span> 
       <p>The National Average is <b>$21,500</b></p> 
       </div> 
      </div> 
      </td> 
      <td class="pic"> 
      <a href="#"><img src="http://placehold.it/113x75" /></a> 
      </td> 
     </tr> 
     </table> 
    </div><!-- .dealFinder --> 
</div>​ 

jQuery:

$(document).ready(function() { 
    // Tooltip 
    $('.tooltip').hide(); 
    $('.text').each(function(e) { 
     var self = this; 
     var tooltip = $(self).find('.tooltip'); 
     var youSave = $(self).find('.youSave'); 
     $(youSave).mouseenter(function(e) { 
     $(self).find(tooltip).fadeIn("slow"); 
     }); 
     $(youSave).mouseleave(function(e) { 
     $(self).find(tooltip).fadeOut("fast"); 
     }); 
    }); 
});​ 

Answer 1

per l'avvio è scritto strano. Prova:

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item.parent()).fadeIn(); 
}); 

//the same way for mouseleave 

e visualizzare i tooltip: nessuno di default perché cambiarlo con js?

Vedo il problema. Tooltip fadein dove si trova il tuo mouse e quell'evento di fuoco con il mouseleave. Facile da risolvere Tooltip deve essere .youSave elemento secondario:

<a class="youSave" href="#" onclick="return false"><span> You Save at Least $14,810<span> 
<div class="tooltip"> 
        <div class="inner"> 
        <b>2012 Land Rover Range Rover Evoque</b> 
        <span>Your Price $19,330</span> 
        <p>The Web2Carz National Average is <b>$21,500</b></p> 
        </div> 
</a> 

e poi JS:

$('.text .youSave').mouseenter(function(){ 
    var item = $(this); 
    var tooltip = $('.tooltip', item).fadeIn(); 
}); 

Answer 2

Ci

davvero dovrebbe quasi mai una necessità di una ogni funzione per scorrere sugli elementi solo per loro si legano ai gestori di eventi :

$(document).ready(function() { 
    $('.tooltip').hide(); 
    $('.youSave', '.text').on('mouseenter mouseleave', function() { 
     $(this).next('.tooltip').fadeToggle('slow'); 
    }); 
});​ 

FIDDLE

Il resto è solo questioni di posizionamento da posizionare il tooltip sulla parte superiore del tasto, e dovrebbe essere risolvibile con un po 'di CSS.