Unbinding/Rebinding .on()/.off() mouse events from animated buttons

问题

This question is somehow related to one other I posted before. The reason I'm making a new question is because I changed things a bit and haven't been able to deal with a litte issue since then.

So, I have this simple horizontal slideshow. I have a left and right button to control it (besides the ability to directly click on the slides). Basically I want my buttons to deactivate themselves when the slideshow reaches it's left/right end and reactivate when they are nedded again. I've tried with .off() but it just deactivates permanentely. When I want it back on - .on() - it doesn't work.

HTML markup:

<div id="rocksMenu_btnLeft"></div>
<div id="rocksMenu_btnRight"></div>

      <div id="centerArea">
         <div id="menuContainer">
            <div id="menuItem_1" class="menuItem">
               <div class="content">Contents1</div>
            </div>
            <div id="menuItem_2" class="menuItem">
               <div class="content">Contents2</div>
            </div>
            <div id="menuItem_3" class="menuItem">
               <div class="content">Contents3</div>
            </div>
            <div id="menuItem_4" class="menuItem">
               <div class="content">Contents4</div>
            </div>
         </div>
      </div>

Full code here - Fiddle (clean version - I deleted my button disabling code try, because it was getting messy). I've searched for this issue, but couldn't get a clear answer.

Thanx.

Pedro

回答1:

You don't have to deactivate the event, just do a check and if the end is reached, don't do the animation action.

$('#rocksMenu_btnRight').on('click', function() {
    if (menuItem_place === menuItem_limit) return;
    // animation code
}

For btnLeft just change the condition if (menuItem_place === 0) return;.

来源：https://stackoverflow.com/questions/16019825/unbinding-rebinding-on-off-mouse-events-from-animated-buttons

标签

jquery

button

mouseevent

slideshow