Javascript disable onclick event until it's event is finished - javascript

How can I temporary disable onclick event until the event is finished?
So far that's all I've come up with:
<script>
function foStuff(a){
//no modifications here to be done, just some code going on
}
$(document).ready(function(){
$("#btn").click(function(){
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){ //when do stuff finishes is what i need to get
obj.prop('onclick',action);
});
});
});
</script>
<div id="btn" onclick="doStuff(500)">
</div>
EDIT:
I've tried it this way: but it doesn't unblock the click event
$("#btn").click(function(){
var obj = $(this);
obj.off('click');
$.when( doStuff(500) ).then( function(){
obj.on('click'); // it actually comes here, but click event is being unset
} );
});
<script>
$(document).ready(function(){});
</script>
<div id="btn">
</div>

Well, you can create a variable that tells your function to ignore it while it's true;
var isIgnore = false;
$("#btn").click(function(){
if(isIgnore)
return;
isIgnore = true;
var obj = $(this);
var action = obj.prop('onclick');
obj.prop('onclick','');
whenDoStuffFinishes.(function(){
obj.prop('onclick',action);
isIgnore = false;
});
});
This code is not tested but I think this will work.

Simply reference the handler, and detach it before performing your action, then at the end attach it again ...
$(document).ready(function () {
var handler = function () {
var obj = $(this);
obj.off('click');
whenDoStuffFinishes.(function () {
obj.click(handler);
});
};
$("#btn").click(handler);
});

use pointerEvents.try this:
$("#btn").click(function(){
document.getElementById('btn').style.pointerEvents = 'none';
whenDoStuffFinishes.(function(){
document.getElementById('id').style.pointerEvents = 'auto';
});
});

Using a combination of bind and unbind
https://api.jquery.com/bind/
https://api.jquery.com/unbind/

Turn the event off once it is triggered and reattach it at the end of the callback.
jQuery( '#selector' ).on( 'click', function voodoo( event ) {
jQuery( event.target ).off( event.type );
// Do voodoo...
jQuery( event.target ).on( event.type, voodoo );
});
Alternatively and depending on the scenario, event.stopImmediatePropagation() might also serve as a solution. It will stop all subsequently attached event handlers from firing and itself from bubbling up the DOM tree.
jQuery( '#selector' ).on( 'click', function( event ) {
event.stopImmediatePropagation();
});

Related

How to correctly unbind an element?

This is my bind code:
<div id="exam-passing-test">
<button id="button-next-task">
<div class="e-div-nextpage-style">'.$butText.'</div>
</button>
</div>
function($){
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler()
}
}
}
})(jQuery);
$("#exam-passing-test").on("destroyed", function() {
console.log("bind")
alert("Error");
});
$("#button-next-task").on("click", function(e){
e.preventDefault();
$("#exam-passing-test").off("destroyed", function() {
console.log("unbindOk")
});
$("#content-exam").load("/exam.php?action=show&epage=task&categoryId=" + selectedCategoryId, {testData:testData});
)};
Ok, now i just try to do that, I simplified the code, but off still not working. Need to off() event on click button.
Consider using jQuery.one() method:
$( "#exam-passing-test" ).one( "click", function( event ) {
alert( "A click event happened!" );
});
It will handle your click event just once.

Why is this my jQuery keypress() event not working?

I have a text box
<input id="textinput" type="text" name="text_input" value=""/>
and a properly linked (did a console.log in the document ready function and it worked) jquery file
$(document).ready(function()
{
console.log("hi");
});
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
As far as I can tell, I'm doing everything properly. However, I am obviously not doing something right.
My goal is to make it so that whenever a letter/character (or any key, really) is pressed with focus on the textinput textbox, an event will trigger.
What am I doing wrong here?
Put the keypress function inside the $(document).ready() function:
$(document).ready(function() {
console.log("hi");
$( '#textinput' ).keypress(function() {
var tag_text = $(this).val();
console.log("key pressed");
});
});
JSFiddle
Try binding the keypress event in the $(document).ready() function. Your code works as intended.
$(document).ready(function() {
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
});

jQuery: POST data without refreshing

The link is in the footer, The problem is: onclick, the page jumps to the header with a # in the address bar, is there a way to stay in the footer ?
here is my code
<span style="color: #33A13D"><i class="fa fa-hand-o-up"></i></span>
$(document).on('click', '.clickIn', function(){
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
Thanks
Use event.preventDefault():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This cancel default action of browser in specific element. Check reference: http://api.jquery.com/event.preventDefault/
Yo have to modify your handler to add e.preventDefault() and e.stopPropagation():
$(document).on('click', '.clickIn', function(e){
e.preventDefault();
e.stopPropagation();
var $this = $(this);
var liCount = $('#liCount');
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
This will prevent default action for your link (follow "#" link) and stop the propagation (bubbling) of the click event.
You can prevent the default behaviour of a triggered event by calling the preventDefaultmethod of the event object. I.e.:
$(document).on('click', '.clickIn', function(event){
var $this = $(this);
var liCount = $('#liCount');
// Do this:
event.preventDefault();
if($(this).attr('attrIn')=='Like'){
$.post('page.php',{i:$(this).attr('id'),action:'like'},function(){
$this.html('done');
$this.attr('attrIn','');
});
}
});
inside click use
event.preventDefault();

Disable click on an element during animation

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 );
});

hiding element on blur, when it is shown

I don't understand why my function is not working.
It is showing up the login form, but when I blur (click somewhere else than the form) it is not hiding.
here is my buggy code:
$(document).on('click', '#login-btn', function(){
var $form = $("#login");
$form.show("slow" );
$("#login").on('blur', function (){
$form.hide("slow");
});
});
You probably do not want this blur to be handled only when click event gets fired.
Move the blur event out of the click event
var $form = $("#login");
$(document).on('click', '#login-btn', function(){
$form.show("slow" );
$('#loginUsername').focus();
});
$form.on('focusout', function (){
$form.hide("slow");
});
You can do this:
var $form = $("#login");
$(document).on('click', '#login-btn', function () {
$form.show("slow");
}).on('blur', '#login', function () {
$form.hide("slow");
});

Categories

Resources