Turn Hover Event back on after disabling on Click?

Question

I have a rating script that will highlight list items based on where you are hovered on the list. On click I disable the hover events to ensure the list items highlighted stay highlighted. I will then run an ajax call that will save the rating for the specific item. I would then like the hover events to turn back on. Any suggestions? Here is the fiddle. http://jsfiddle.net/defmetalhead/n76My/1/

   <ul class="beeRating">
      <li class="oneBee" id="1">1</li>
      <li class="twoBee" id="2">2</li>
      <li class="threeBee" id="3">3</li>
      <li class="fourBee" id="4">4</li>
      <li class="fiveBee" id="5">5</li>
   </ul>

Answer 1

DEMO

Try this I have edited your code,It works

var index=1;
$(".beeRating li").on({
    mouseover: function() {
        if(index==1)
        {
        $(this).addClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '1');
            if( $(this).hasClass('stop') ) {
                return false;
            }
        })
        }
    },
    mouseleave: function() {
         if(index==1)
        {
        $(this).removeClass('stop');
        $("li").each(function(index,domEle) {
            $(domEle).css('opacity', '.25');
        })
        }
    },
    click: function() {
        var rating = $(this).attr('id');
        console.log(rating);
        index=0;

        $.ajax({    //call the function to do ajax request or do it here itself
           url: "<your url>"

           }).done(function() {   // important !! on done set the index as 1
              alert("success");
              index=1;  
            });
       }
});

Hope this helps, Thank you

Answer 2

try this:

var $ratings = $(".beeRating li");

function onMouseOver(obj){
    obj.addClass('stop');
    $("li").each(function(index,domEle) {
        $(domEle).css('opacity', '1');
        if( $(this).hasClass('stop') ) {
            return false;
        }
    });
}

function onMouseLeave(obj){    
    obj.removeClass('stop');
    $("li").each(function(index,domEle) {
        $(domEle).css('opacity', '.25');
    });
}

function onClick(obj){
    var rating = obj.attr('id');    
    console.log(rating);
    $("li").each(function(index,domEle) {
        $(this).removeClass('stop');
        $(this).off('mouseover mouseleave');
    })
}

function rebindEvents(){
    $ratings
        .off('click mouseover mouseleave')
        .on({
        mouseover: function() {
            onMouseOver($(this));
        },
        mouseleave: function() {
            onMouseLeave($(this));
        },
        click: function() {
            onClick($(this));
            //send ajax call here or show some delay and rebind all events again
            rebindEvents();
        }
   });
}

rebindEvents();

working fiddle here: http://jsfiddle.net/n76My/3/

I hope it helps.