Metoda jQuery .each() nie działa w przeglądarce Firefox

Question

Mam każdą metodę, której używam do uruchomienia etykiety narzędziowej odpowiedniej dla <td>, która istnieje wewnątrz. Wszystko działa wspaniale w IE, Chrome, Safari, ale Firefox zupełnie nie ma każdej z tych metod i uruchamia tylko ostatnią etykietkę narzędzi w DOM.

Co daje?

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

na początek jest napisane dziwnie. Wypróbuj:

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

//the same way for mouseleave 

i wyświetlaj podpowiedzi: domyślnie nie ma powodu, aby zmienić to za pomocą js?

Widzę problem. Etykietka fadein tam, gdzie znajduje się mysz, a to wydarzenie z ogniem mysi. Łatwe do naprawienia. Etykietka musi być .youSave element podrzędny:

<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> 

a następnie JS:

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

Answer 2

Nie

naprawdę prawie nigdy nie powinny być potrzebne dla każdej funkcji iteracyjne nad elementy po prostu związać je do obsługi zdarzeń :

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

Reszta to tylko problemy z umieszczeniem od umieszczenia podpowiedzi na górze przycisku i powinna być możliwa do naprawy za pomocą małego CSS.