How to prevent jQuery mouseenter/mouseleave events upon click
<p>I have a feeling I may be going about this completely the wrong way... Hopefully someone can help me.</p>

<p>I have developed a star ratings system for my application.</p>

<p>Below is the code I have so far which does the following:</p>

<p>A single star is displayed with a number inside it which is retrieved from the database via JSON.  When you hover over this single star the 10 stars fadeIn.  When you click on this it then initialises 'voting' mode and mouseenter, mouseleave event handlers are asigned to the individual stars.  When you then click a star an ajax post is made which updates the database, replaces the number (of average vote score) in the numbered star and add's a class to the relevent number of stars so that there is a visual representation of the star rating for this item.  This all works fine.</p>

<p>The problem:-</p>

<p>Currently when you have clicked once to enter 'vote' mode then hovered over the stars (which adds highlight classes as you mouseenter) then clicked to actually vote the original mouseenter/mouseleave event handlers are still live on the individual stars.</p>

<p>I would like the adding/removing of classes upon hovering to stop once the user has voted.</p>

<p>I'm certain the answer will be something to do with either using event.stopPropagation of by unbinding the the handlers themselves with .off() but I cannot seem to make it work.</p>

<p>Any ideas?</p>

<pre><code>//show ratings on hover
$('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click', 
                                        '.rate', 
                                        function (e) {

  $ratings = $(this).parent().find('.ratings_stars');

  if (e.type == 'mouseenter') {
    $ratings.fadeIn();
  }

  if (e.type == 'mouseleave') {
    $ratings.fadeOut();
  }

  if (e.type == 'click') {

    $('#full-width-layout_c1_col-1-1_1').on('mouseenter mouseleave click',
                                            '.ratings_stars', 
                                            function (e) {

      var $vote = $(this).parent().find('.vote_info').text();
      var $hover = $(this).prevAll().andSelf();
      var $original = $(this).parent()
                             .find('.star_' + $vote)
                             .prevAll()
                             .andSelf();

      if (e.type == 'mouseenter') {
        $hover.addClass('ratings_over');
        $(this).nextAll().removeClass('ratings_vote');
      }

      if (e.type == 'mouseleave') {
        $hover.andSelf().removeClass('ratings_over');
        $original.addClass('ratings_vote');
      }

      //Highlight stars on hover and insert into database on click
      if (e.type == 'click') {

        var $row = $(this).closest('tr').find('.songnamecolumn');
        var $rating = $(this).index() + 1;
        var $songID = $(this).closest('tr')
                             .find('.songnamecolumn')
                             .attr('alt');

        var $userID = $('#loggedin_user_id').text();

        $.ajax({
          url: "/wp-content/ratings.php",
          type: 'POST',
          data: 'song_id=' 
                + $songID 
                + '&amp;user_id=' 
                + $userID 
                + '&amp;rating=' 
                + $rating,
          success: function () {
            $songid = $songID;

            updateRating($songid, $row, $original);
          }
        });
      }
    });
  }
});
</code></pre>

<p>The relevant HTML is as follows:</p>

<pre><code>&lt;div class="rate"&gt;
    &lt;div class="star_1 ratings_stars ratings_vote" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_2 ratings_stars ratings_vote" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_3 ratings_stars ratings_vote" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_4 ratings_stars ratings_vote" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_5 ratings_stars ratings_vote" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_6 ratings_stars" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_7 ratings_stars" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_8 ratings_stars" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_9 ratings_stars" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="star_10 ratings_stars" style="display: none;"&gt;
    &lt;/div&gt;
    &lt;div class="vote_info"&gt;
        5
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
