Как отключить все ссылки с классом button после однократного нажатия? Я хотел бы иметь возможность сделать это в одном месте и не менять их индивидуально. Любые идеи?
До сих пор я получил это:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").click(function() { return false; });
но второе событие не срабатывает.
Вот что я хотел бы попробовать:
$("a.button").one("click", function() {
$(this).click(function () { return false; });
});
Свяжите все ссылки с классом "button". Запускать анонимную функцию только один раз (отсюда "один" ), который восстанавливает ссылку для возврата false.
Если вы хотите, чтобы он выглядел больше похожим на то, что у вас есть, попробуйте следующее:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
if ($(evt.target).is("a[disabled]"))
return false;
});
У меня есть элегантное решение для этого, если вы используете ссылки:
function do_nothing() {
return false;
}
// prevent a second click for 10 seconds. :)
$('.prevent_doubleclick').live('click', function(e) {
$(e.target).click(do_nothing);
setTimeout(function(){
$(e.target).unbind('click', do_nothing);
}, 10000);
});
https://github.com/ssoroka/prevent_doubleclick.js
Я скоро добавлю поддержку форм.
Да, задайте значение, чтобы отслеживать это:
$("a").click(function (){
if( $(this).data("clicked") ){
return false;
}
$(this).data("clicked", true);
return true;
});
создать JS - включить его на каждую страницу (или на вашу главную страницу, если у вас ее есть.)
Я думаю что-то вроде
$(document).ready(function(){
$('.button').click(function(){
$('.button').click(function(e) {
e.preventDefault();
});
});
});
Вы также можете просто бросить класс на якорный тег и проверить на клик:
$('a.button').click(function(){
if($(this).hasClass('clicked')) return false;
else {
$(this).addClass('clicked');
return true;
}
});
С помощью класса вы можете сделать дополнительный стиль для ссылки после первого щелчка.
$('a.button').bind('click', function(){
alert('clicked once'); // for debugging
// remove all event handlers with unbind()
// add a new function that prevents click from working
$(this).unbind().bind('click', function(){
alert('clicked a 2nd time or more'); // for debugging
return false;
});
});
Это работает как для IE, так и для Chrome с атрибутами href и onclick для тегов привязки:
$(document).ready(
function()
{
$('a.button').on("click",
function(event)
{
$('a.button').prop('onclick',null);
$('a.button').removeAttr('href');
});
});$("a.button").bind('click', function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live('click', function() { return false; });
Это. Первая строка привязывает ко всем a-элементам с кнопкой класса функцию, которая отключает отключенный атрибут (btw invalid for a-elements).
Вторая функция использует jQuery live event rebinding для привязки функции "отключение" ко всем будущим экземплярам a-элементов, у которых есть и отключенный атрибут
Отметьте jQuery Документация событий для более подробной информации о двух используемых функциях, если вы хотите
События привязаны только к document.ready, вы должны обрабатывать это с помощью события .live:
$("a.button").live("click", function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live("click", function() { return false; });
Возможно, вам придется отключить представления ajax в форме и нажать кнопку управления:
$("form").attr("data-ajax", "false");
$("[type='submit']").click(function (e) {
var form = $("form");
if (!this.disabled) {
if (form.valid()) {
this.disabled = true;
form.submit();
}
}
});
Мне нравится идея решения, предоставленная Адамом, однако это не сработало для меня. Если у вас возникли проблемы с использованием .one(), чтобы отключить ссылки после щелчка, я рекомендую попробовать следующее.
$("a.button").bind("click", function( event ) {
// Unbind the click event from anchors with class button
$(this).unbind( event );
});
Я считаю, что вы говорите об общей проблеме, вы просто не хотите, чтобы ссылку или кнопку нажимали несколько раз подряд. Возможно, вы действительно не хотите отключать кнопку или ссылку, вы просто хотите предотвратить "другой щелчок" до того, как закончится первый щелчок.
Если вам нужна задержка между нажатиями, вот один из вариантов:
//prevent double click
$(document).on('click', ".one-click", function(e){
if($(this).data('lastClick') + 1000 > new Date().getTime()){
e.stopPropagation();
return false;
}
$(this).data('lastClick', new Date().getTime());
return true;
});
Что нужно сделать дальше - это дать кнопкам или связать класс "одним щелчком".
Событие зарегистрировано в документе, оно также будет работать для динамически загруженного html.
1000 в коде - это задержка в одну секунду. то есть в течение 1 секунды первого щелчка, любой щелчок игнорируется. Измените значение задержки по желанию.
Я столкнулся с этой проблемой, когда хочу остановить Модификатор Bootstrap (модифицированный и активированный Ajax), появляющийся более одного раза. Вышеупомянутое решение не помогает, но нужно использовать модальное "шоу" и "скрыть" событие Bootstrap для предотвращения двойного всплытия.
$('a.disableAfterOneClick').on('click', function(e){
e.preventDefault(); //disabling default behaviour
if (this.href) //checking if href attr is stil set
{
href = this.href; //saving current href for it will be removed
$(this).removeAttr("href"); //removing href
window.location.href = href; //redirecting user to href
}
});
Я использую это, чтобы дважды отключить событие отправки "click" (а не события "двойного щелчка" ). Работайте в IE >= 9, firefox, webkit или хром. Первое событие клика отключает кнопку/ссылку/интервал за время. По прошествии времени включается кнопка/ссылка/диапазон, и пользователь может нажать на нее.
$(document).ready(function() {
/**
* disable double click
**/
document.addEventListener('click', function(event) {
var targetElement = event.target || event.srcElement;
var target = $(targetElement);
var eLink = target.prop("tagName") === 'A'; // hypertext link
var eButton = target.prop("tagName") === 'BUTTON'; // button
var fButton = target.prop("tagName") === 'SPAN' && target.parent().parent().hasClass("fbutton"); // flexigrid buttons
if ( eLink || eButton || fButton ) {
if ( target.data("clicked") ) {
event.stopPropagation();
event.preventDefault();
if ( window.console ) {
console.log("double click event disabled");
}
return false;
} else {
target.data("clicked", true);
target.prop('disabled', true);
target.addClass("clicked");
setTimeout(function() {
target.data("clicked", false);
target.prop('disabled', false);
target.removeClass("clicked");
}, 500); // Do something after 500 millisecondes
return true;
}
}
}, true);
});
Это должно работать, когда вы используете функцию
var clickRunning = false;
function OpenSth(){
if (clickRunning) return;
clickRunning = true;
yourFunc({
/* do your stuff*/
},500, function () {
clickRunning= false;
});
}
Вы всегда делаете большие хлопоты по поводу sipmple.
При первом щелчке установите переменную самозапуска с задержкой. Это отключает второе нажатие на некоторое время. Простой!
var formvar=1;
$('#myForm').submit(function() {
if(formvar==1)
{
$(this).ajaxSubmit(options); // or do what ever normally do
setTimeout(function(){formi=1}, 3000);
formvar=0;
}
else alert("no dbl clicking");
});