执行 .click(function() 只有第一次点击
Execute .click(function () only first click
我试图只在第一次点击时执行给定 .click(function()
,但它总是在点击时执行。
它在单击 .more-post-button
时有效,它将添加 class loading
到 .main ul
和 show-more-post
到 .main li
然后删除 Class loading
setTimeout 函数 7 秒。
JS:
$(".more-post-button").click(function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
我的问题是如何仅在第一次点击时执行此操作,而不是每次点击时执行此操作。
提前致谢。
保存在一个变量中:
var clicked = false;
$(".more-post-button").click(function () {
if(!clicked) {
clicked = true;
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
}
});
在你的函数中使用 unbind 来删除所有事件
$(this).unbind();
来自jQuery 1.7 .off 是推荐方式
$(this).off();
尝试:
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
它只会处理一次。
我会使用 jQuery 的 .one()
函数。这会附加一个只会触发一次的处理程序。
修改后的JS
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},1000);
});
为什么要使事情复杂化,尝试对其进行简单的关闭。您也不会污染全局名称 space!
演示进行 here
(function(){
'use-strict';
var button = document.getElementsByTagName('button')[0];
var myHandler = function() {
var click = 0;
return function() {
if(click === 0) {
alert('single click');
}
click++;
}
}();
button.addEventListener('click', myHandler, false);
})();
实际上您可以在 addEventListener
中发送一个选项 { once: true }
告诉它只触发一次。所以加起来 并且只使用 javascript,它将是:
var button = document.getElementsByTagName('button')[0];
var handler = function () { alert('once click'); };
button.addEventListener("click", handler, {once: true});
来源:
我试图只在第一次点击时执行给定 .click(function()
,但它总是在点击时执行。
它在单击 .more-post-button
时有效,它将添加 class loading
到 .main ul
和 show-more-post
到 .main li
然后删除 Class loading
setTimeout 函数 7 秒。
JS:
$(".more-post-button").click(function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
我的问题是如何仅在第一次点击时执行此操作,而不是每次点击时执行此操作。
提前致谢。
保存在一个变量中:
var clicked = false;
$(".more-post-button").click(function () {
if(!clicked) {
clicked = true;
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
}
});
在你的函数中使用 unbind 来删除所有事件
$(this).unbind();
来自jQuery 1.7 .off 是推荐方式
$(this).off();
尝试:
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},7000);
});
它只会处理一次。
我会使用 jQuery 的 .one()
函数。这会附加一个只会触发一次的处理程序。
修改后的JS
$(".more-post-button").one("click", function () {
$('.main ul').addClass('loading');
$('.main li').addClass('show-more-post');
setTimeout(function(){
$('.main ul').removeClass('loading');
},1000);
});
为什么要使事情复杂化,尝试对其进行简单的关闭。您也不会污染全局名称 space! 演示进行 here
(function(){
'use-strict';
var button = document.getElementsByTagName('button')[0];
var myHandler = function() {
var click = 0;
return function() {
if(click === 0) {
alert('single click');
}
click++;
}
}();
button.addEventListener('click', myHandler, false);
})();
实际上您可以在 addEventListener
中发送一个选项 { once: true }
告诉它只触发一次。所以加起来
var button = document.getElementsByTagName('button')[0];
var handler = function () { alert('once click'); };
button.addEventListener("click", handler, {once: true});
来源: