Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery .each() method not working in Firefox

I have an each method I'm leveraging to launch a tooltip relevant to the <td> it exists within. Everything works great in IE, Chrome, Safari, but Firefox is completely missing the each method, and launching only the last tooltip in the DOM.

What gives?

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");
      });
    });
});​
like image 929
robabby Avatar asked Oct 31 '12 19:10

robabby


1 Answers

There really should almost never be a need for an each function to iterate over elements just to bind them to event handlers:

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

FIDDLE

The rest is just placement issues from placing the tooltip on top of the button, and should be fixable with a little CSS.

like image 190
adeneo Avatar answered Nov 15 '22 08:11

adeneo