jquery - 禁用点击后重新打开悬停事件？

Question

我有一个评级脚本，它将根据您在列表上的悬停位置突出显示列表项。单击时，我禁用悬停事件以确保突出显示的列表项保持突出显示。然后我将运行一个 ajax 调用来保存特定项目的评级。然后我希望悬停事件重新打开。有什么建议么？这是小提琴。 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

尝试这个：

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();

在这里工作小提琴：http: //jsfiddle.net/n76My/3/

我希望它有所帮助。