I've added a snippet of code with what I am wanting to achieve in the comments.
There are 9 buttons and I need the data-id value of a button that is clicked but the user may click a button, and then quickly decide they want to click a different button, so I would want the value of the last button they click.
$( '#add-shot a.btn' ).on( 'click', function(e) {
e.preventDefault();
// delay for 1500
// if no other button is clicked, then simply use $( this ).data('id');
// else,
// if other button is clicked, don't use original data-id but use the new data-id
var id = $( this ).data('id');
// run the rest of the code
});
You can use a global timer with setTimeout(). On each click simply clear the timeout, if none of them are clicked within 1.5 seconds then the anonymous function will be called and get the appropriate id:
var timer;
$( 'button' ).on( 'click', function(e) {
e.preventDefault();
var self = this;
clearTimeout(timer); // Reset the timer.
timer = setTimeout(function(){ // Call this function if the timer
var id = $( self ).data('id'); // did not reset within 1.5 seconds.
alert(id);
}, 1500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-id="foo">
foo
</button>
<button data-id="bar">
bar
</button>
<button data-id="biz">
biz
</button>
Related
I am new to Jquery and my Question is can i delay the click on the submit button for example, you cannot click the submit button for 1 second after submitting so I can prevent the Click spamming on the submit button
this is my Click event
$("#btnConfirmEditNo").click(function (e) {
e.preventDefault();
$('#editContactForm').validationEngine('hide');
editwnd.close();
});
also tried the settimeout() but it delays the closing of the window
This example may help you:
Using On - Off
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').on('click', handleClick);
}, 1000);
$( this ).off( event );
}
$('#btn').on('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
Using One
function handleClick(evt) {
$( "#btn" ).prop( "disabled", true );
setTimeout(function() {
$( "#btn" ).prop( "disabled", false );
$('#btn').one('click', handleClick);
}, 1000);
}
$('#btn').one('click', handleClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click Me</button>
You can register a callback function on a button and subsequently remove that callback using the jquery off method. This means that when the submit button is pressed, you can remove the event handler and then set a timer that will subsequently re-add it after a period of time when the timer fires. You can use the window.setTimer() function to register a function to be called after a period of time.
An alternate algorithm would be to have a class level "flag" that is set when the button is clicked and reset when a timer expires. In your handler for a button press, you would check the value of the flag and, if true, ignore the button press.
Basically setTimeout is used to handle the 1s off state.
Here are two examples:
Using .one()
var $btn = $('#btnConfirmEditNo');
function doSomething() {
// Do here whatever you want
setTimeout(function(){
$btn.one("click", doSomething);
}, 1000);
}
$btn.one("click", doSomething);
Using a flag
function doSomething() {
var el = this;
if(el.noClick) return;
el.noClick = 1;
// Do here whatever you want
setTimeout(function() { el.noClick = 0; }, 1000);
}
$('#btnConfirmEditNo').click(doSomething);
I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
// Perform an AJAX call here.
});
});
Here is a demo of my code so far:
DEMO
I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.
Should not code click event inside click, but after modifying in your code.
var third_click= false;
$(document).ready(function() {
$( 'button#c' ).click( function() {
third_click = true;
})
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
if( !third_click ) {
// Perform an AJAX call here.
alert( 'ajax call in progress' );
} else {
alert( 'Can\'t call ajax' );
}
});
});
})
here is demo.
What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.
example:
$('.btnB').hide();
$('.btnA').on('click', function() {
$('.btnB').toggle();
});
Unless it needs to all display at one time this method wouldn't be able to work in that type of situation
You can just remove the click events from #a and b# when clicking on #c with:
$('#c').click(function () {
$('#a,#b').off('click')
})
jsFiddle example
I wish to do the following:
Create a list(ul and li). Then on ul click, i want to insert div based on condition i.e. if checkbox is selected then created a div with 4 checkboxes.
If radio is selected from the list then a div is created with 4 radios.
Following is my jquery code:
var addDiv=document.createElement("div");
$("#id-ul").click(function(){$('#sidr-bottom').hide();
var div_id=0;
addDiv=document.createElement("div");
$( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio );
addDiv.id = "div_multi"+div_id; ...
checkbox handler:
function myHandler( event ) {
alert("check : "+ event.data.divId );}
radio handler:
function myHandlerRadio( event ) {
alert("radio:"+ event.data.divId );}
Now the problem is that when i click on checkbox from the list for first time, myhandler is not called.
When i click it again, handler gets called once.
When i click it once more, handler gets called twice.
What is the reason for this weird behavior?
Please let me know how do i solve this.
edited :
I moved the below 2 lines outside #id-ul click.
$( "#A_MULTI" ).on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).on( "click", { divId:addDiv }, myHandlerRadio );
I still face the same problem.
This is because you are assigning event handler every time your #id-ul is clicked.
Please move your event outside event handler.
The problem is that you are adding handlers without ever clearing them. You should do this:
$( "#A_MULTI" ).off("click").on( "click", { divId:addDiv }, myHandler );
$( "#A_RADIO" ).off("click").on( "click", { divId:addDiv }, myHandlerRadio );
To remove the old handler(s) before assigning new ones.
I want to prevent clicking on an element, while it performs some animations and then enable it later. I have tried to use unbind and then bind, but clicking remains permanently disabled.
Is there any other way to do it?
$("something").on("click", function() {
$("selected").unbind("click");
$("selected").animate({...}, function() {
$("selected").unbind("click");
});
basically, i don't want someone to click on the selected div while the animation is in progress, as clicking on it will start another set of animations which i don't want to start in between.
Try this, using a flag variable to store the info if the animation is happening:
var animating = false;
$("something").on("click", function () {
animating = true;
$("selected").animate({...
}, 1000, function () {
animating = false;
});
});
$("selected").click(function(){
if (animating) return false;
});
Use on and off this way you can "bind" the function foo to a click event on a particular element, switch it off and on again, as many times as you like. Have fun ;-)
DEMO: http://jsfiddle.net/4yBbb/2/
var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );
edit: updated answer, my example used delegation and this was not necessary.
applied to your example it would look like this:
$("something").on("click", function() {
$("selected").off( "click", foo );
$("selected").animate({...}, function() {
$("selected").on( "click", foo );
});
clicking remains permanently disabled.
Because when never bind the "click" again to $("something"). Try:
$("something").on("click", function animate() {
var _this = $(this);
_this.off("click");
$("selected").animate({...}, function() {
_this.on("click",animate);
});
Here I use named function to make it easy to refer to the function again.
How about adding a check in your click function to perform the animation only when the clicked element is not animating?
$("something").on("click", function() {
$("selected").animate({...});
});
$("selected").on("click",function(){
if(!$(this).is("selected:animated")){
//Start other animation
}
});
Demo fiddle
Use .on() & .off() event of jquery. here is the example Jquery API
you need to do somthing like as follows:
function flash() {
// do your stuff here
}
$("something").on("click", function() {
$( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
$( "body" ).on( "click", "Your Div Selector", flash );
});
Not sure if this is possible but I have a slideshow on my site that when a button is click the relevant slide, slides in.
What I want to do is add a timer so that after 3 seconds the next button is clicked, making my slideshow slide automatically.
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
Ive added a Fiddle...
http://jsfiddle.net/5jVtK/
The simplest way to do this is to use setTimeout (happens once after a delay) or setInterval (happens every so often).
setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
Once you get this implemented, you may want to think about some other niceties, such as stopping the automatic progression when the user's mouse is over the next button or over the slideshow (since that implies interest in what is currently displayed) and resuming the autoadvance on mouseout.
Next: it sounds like you need to figure out how to dynamically find the correct button to trigger to keep advancing through multiple slides. This is one way to do it:
`
function click() {
// Find the button for the next slide in relationship to the currently active button
var $next = $( '#button' ).find( '.active' ).next( 'a' );
// If there isn't one, go to the beginning
if ( ! $next.length ) {
$next = $( '#button' ).find( 'a' ).first();
}
// Trigger the click
$next.trigger( 'click' );
setTimeout(click, 3000);
}
setTimeout(click, 3000);
Here's a link to a fiddle showing this in action:
http://jsfiddle.net/5jVtK/1/
You can trigger the click event of an element with jQuery by doing
$('#button a').click();
To make this happen at a 3 second interval, use setInterval():
function simulateClick(){
$('#button a').click();
};
setInterval(simulateClick, 3000);
Something like this should work. This way we are running a function at an interval and the click also triggers the same function. The timer never needs to activate a button, just activate the function that the button also activates.
$(document).ready(function() {
var timer = setInterval( slideFunction, 5000);
$('#button a').click(function(){
slideFunction();
});
function slideFunction(){
var integer = $('#button a').attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
}
});