Как предотвратить openContent(); нажимать $("#load-content").on("transitionend
каждый раз, когда я нажимаю .show-content
???
Я не знаю, как остановить этот transitionend
чтобы его пнули! Пожалуйста, помогите
$('.show-content').on('click', function (e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click','.prev',function (e){
e.preventDefault();
closeContent(this);
});
function openContent(){
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$(this).addClass('animate');
var body = $("body,html");
body.animate({
scrollTop: 0
}, 800);
});
}
function closeContent(ele){
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
}
}
как правило, вы должны пропустить пробел в событии и off
событие после увольнения
$el.on('transitionend.mynamespace' function(){
$el.off('transitionend.mynamespace')
});
Пример:
$dropdown.on('transitionend.fadein' function() {
// some function to be called on transitionend
doSomething();
// event will not be called again
$dropdown.off('transitionend.fadein')
});
ОБНОВИТЬ
адаптирован к вашему коду
(вы также используете слишком много переходных хендлеров)
Я создал пространство имен с подпространством e, поэтому теперь вы можете сказать .off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')
Попробуйте, кто будет делать то, что вам нужно
Вы должны полностью прочитать это: http://api.jquery.com/event.namespace/
Также код выглядит не слишком удивительно.
Для улучшения удобочитаемости и производительности следует учитывать более последовательные стили кодирования и кеш-кеширования. Например, я заменил все "
с '
так как вы использовали смешанные кавычки. Возможно, запустите jsHint в вашем редакторе и кешируйте все элементы, которые нужны более одного раза. Но это не очень важно для этой работы.
$('.show-content').on('click', function(e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click', '.prev', function(e) {
e.preventDefault();
closeContent(this);
});
function openContent() {
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
$(this).addClass('animate');
var body = $('body,html');
body.animate({
scrollTop: 0
}, 800);
$('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
});
}
function closeContent(ele) {
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
$('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
}
}
вам может понадобиться
$ele.one('click',function(){...})
который позволяет связать событие только один раз. после увольнения слушатель этого события отвяжет себя. проверьте документ здесь: https://api.jquery.com/one/