#jquery #jquery-animate #bind #unbind
#jquery #jquery-анимировать #привязать #отменить привязку
Вопрос:
Я пытаюсь отменить привязку щелчка по анимации до тех пор, пока анимация не закончится, чтобы предотвратить наложение анимаций. Отмена привязки работает нормально, но, конечно, затем event.preventDefault перестает работать, и моя кнопка / ссылка снова становится активной. Я не уверен, как обойти это.
Сокращенная версия кода является:
$('a.Next').bind('click', SlideFwd);
function SlideFwd(e){
e.preventDefault();
$('a.Next').unbind();
$('ul.GridviewList').animate({
left: '-=800px'
}, 'slow', function() {
$('a.Next').bind('click', SlideFwd);
});
};
и html является:
<div>
<div class="SlideControl">
<p class="Pages"><span class="ProdCountDisplay">#</span> of <span class="ProdCountTotal">10</span></p>
<ul>
<li><a class="Disabled button_Back Previous" href="#">Prev</a></li>
<li><a class="button_Next Next" href="#">Next</a></li>
</ul>
</div>
<ul class="GridviewList">
<li class="ProdWrap">This is a slider space 1</li>
<li class="ProdWrap"> This is a slider space 2</li>
<li class="ProdWrap"> This is a slider space 3</li>
<li class="ProdWrap"> This is a slider space 4</li>
<li class="ProdWrap"> This is a slider space 5 </li>
<li class="ProdWrap">This is a slider space 6 </li>
<li class="ProdWrap"> This is a slider space 7</li>
<li class="ProdWrap"> This is a slider space 8 </li>
<li class="ProdWrap"> This is a slider space 9 </li>
<li class="ProdWrap"> This is a slider space 10 </li>
</ul> <!-- ul.Gridviewlist -->
</div>
Полная рабочая версия здесь:
http://iwrb.idleprattle.com/Slider.htm
(только у следующего теперь настроена привязка)
Я также пытался использовать preventDefault вне функции SlideFwd, но это тоже должно быть отменено. Т.Е.
$('a.Next').click(function(){e.preventDefault();});
Ответ №1:
Вы могли бы сделать это:
$('a.Next').bind('click', SlideFwd);
...
$('a.Next').unbind().bind('click',function(e){e.preventDefault();});
...
$('a.Next').unbind().bind('click', SlideFwd);
Комментарии:
1. Потрясающе, это сработало с одним незначительным изменением: $ (‘a.Next’).unbind().bind(‘click’,function(){e.preventDefault();}); изменено на $ (‘a.Next’).unbind().bind(‘click’,function(e){e.preventDefault();});
2. Ах да, не тестировал это, пропустил e. Ответ обновлен для потомков!
Ответ №2:
Почему бы не удалить атрибут href из ссылки. Здесь это бесполезно, курсор можно установить с помощью CSS, и если у a-элемента нет href, то нечего предотвращать, если обработчик событий не прикреплен.