How would I disable all links with the button class after they are clicked once? I'd like to be able to do this in one place, and not have to change all of them individually.. any ideas?
So far I got this:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").click(function() { return false; });
but the second event isn't firing..
This is what I would try:
$("a.button").one("click", function() {
$(this).click(function () { return false; });
});
Bind all the links with class "button". Run the anonymous function only once (hence "one"), which rebinds the link to return false.
If you want to keep it looking more like what you have, try this:
$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
if ($(evt.target).is("a[disabled]"))
return false;
});
I have an elegant solution for this if you're using links:
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
I'll add support for forms soon.
Yeah, set a value to keep track of this:
$("a").click(function (){
if( $(this).data("clicked") ){
return false;
}
$(this).data("clicked", true);
return true;
});
create a JS - include it on every page (or in your masterpage if you've got one.)
I think something like
$(document).ready(function(){
$('.button').click(function(){
$('.button').click(function(e) {
e.preventDefault();
});
});
});
You could also just throw a class on the anchor tag and check on click:
$('a.button').click(function(){
if($(this).hasClass('clicked')) return false;
else {
$(this).addClass('clicked');
return true;
}
});
With the class, you can do some extra styling to the link after the first click.
This works for both IE and Chrome with href and onclick attributes on anchor tags:
$(document).ready(
function()
{
$('a.button').on("click",
function(event)
{
$('a.button').prop('onclick',null);
$('a.button').removeAttr('href');
});
});
$('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;
});
});
$("a.button").bind('click', function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live('click', function() { return false; });
Does it. First line binds to all a-element with class button a function which sets (btw invalid for a-elements) disabled attribute to disabled.
Second function uses jQuery live event rebinding to bind "disabling" function to all future instances of a-elements which have and attribute disabled
Check jQuery Event documentation for more in-depth info on the two used functions if you want
Events are only bound on document.ready, you should handle this with a .live event:
$("a.button").live("click", function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live("click", function() { return false; });
You may have to disable ajax submissions on the form and handle button click:
$("form").attr("data-ajax", "false");
$("[type='submit']").click(function (e) {
var form = $("form");
if (!this.disabled) {
if (form.valid()) {
this.disabled = true;
form.submit();
}
}
});
I like the idea of solution provided by Adam, however this didn't work for me. If you're having trouble using .one() to disable links after click, I recommend trying the following.
$("a.button").bind("click", function( event ) {
// Unbind the click event from anchors with class button
$(this).unbind( event );
});
I believe you are talking about a common problem, you just don't want a link/button be clicked more than once at one go. Perhaps you don't really want to disable the button or link, you simply want to prevent 'another click' before the first click finishes.
If you want a delay in between clicks, here is one of the options:
//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;
});
What needs to do next is to give buttons or links a class of 'one-click'.
The event is registered to the document, it will work for dynamically loaded html, too.
The 1000 in the code is the delay of one second. i.e. within the 1 second of the first click, any click is ignored. Change the delay value as desired.
I came across this problem when I want to stop a Bootstrap Modal (modified and Ajax enabled) popping up more than once. The above solution does not help though, one need to use Bootstrap modal's 'show' and 'hide' event to prevent double popping.
$('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
}
});
I'm using this to disable the "click" event send twice ( not the "double click" events ). Work for IE>=9, firefox, webkit, or chrome. The first click event disable the button/link/span, during a time. After time passed, button/link/span is enable and the user can click on it.
$(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);
});
This should work when you are using a function
var clickRunning = false;
function OpenSth(){
if (clickRunning) return;
clickRunning = true;
yourFunc({
/* do your stuff*/
},500, function () {
clickRunning= false;
});
}
You always make a big hassle over a sipmple thing.
Set delayer self resetting variable when first click. That disables second clicks over some time. Simple!
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");
});
