Develop Reference

How to prevent more than one click on an Anchor tag button

I have an anchor tag (namely Cancel button) with a class attribute and href attribute in a jsp file .
I have written an onclick event for the class attribute in a seperate js file. So when the button is clicked, the onclick event executes and then takes to the href link.
When the button is clicked more than once it takes me to an empty page or an error page.
I want to prevent more than one click on the button.
I have tried using event.preventdefault() function inside my onclick() function but the href link is not working if I do that.
Any other way?
My JS code:
$('.cancel-btn').on('click',function(evt){
//evt.preventDefault();
//My Code
});

jQuery one() method will perform click event only once:
$('.cancel-btn').one('click',function(evt){
// evt.preventDefault();
// code here
});
Also possible using jQuery on() method that may be more useful when the event should be removed conditionally:
let count = 0; // or may be a boolean flag
$('.cancel-btn').on('click', function(evt){
if (count == 0) {
count++;
// code here
} else {
return false;
// or evt.preventDefault();
}
});
Or like this:
$('.cancel-btn').on('click', function(evt) {
// code here
// then remove the event handler.
$(this).off('click');
});

Try using a boolean flag to make sure the function executes only once
var executeOnce = false;
$('.cancel-btn').on('click',function(evt){
if(!executeOnce){
//evt.preventDefault();
//My Code
executeOnce = true;
}
});

Here you go with one more way to do it using pointer-events as none
https://jsfiddle.net/w2wnuyv6/1/
$('a[value="cancel"]').click(function(){
$(this).css({
'pointer-events': 'none'
});
});

you can write a function like this:
function clickOnce (element ,listener){
element.addEventListener("click", function (event){
listener(event);
element.removeEventListener("click", arguments.callee);
});
}
jsfiddle

As you mentioned the event is written on that class, you can use this simple code to ensure that its clicked only once:
$('.cancel-btn').on('click', function(evt) {
// execue your code
$(this).removeClass('cancel-btn');
});
This code will remove the class from the DOM and hence the click event will never get fired.
Optionally, You can use off() to remove an event like so:
$(".cancel-button").off("click");
This will remove all click events bound to this element. In your code, it would be like:
$('.cancel-btn').on('click', function(evt) {
// execue your code
$(this).off("click");
});

Function called on second click of button ( not on first )

I have a button when clicked i want it to ensure the .mo function is called, however it will only run that function on the second click.
The mealplan() function is running correctly
HTML
<button class="" id="mealbtn" onclick="mealplan()">CLICK ME</button>
I need both the mealplan() and .mo function to be called upon click.
function mealplan(){
// also runs on click
}
Shopify.mo = function(q,ref) {
// this is the function that I need to run uupon click, but it is only running on second click
};
$('#mealbtn').on('click', function(e) {
// should call the .mo function on click
Shopify.mo(Shopify.queuemeals,"note");
});

The jQuery on('click') method only happens when the button is clicked.
Your code is suggesting that when the button is clicked, we initialize the button's click method.
To fix it, move your jQuery event to a function that runs when the page loads:
$( document ).ready(function() {
$('#mealbtn').on('click', function(e) {
// should call the .mo function on click
Shopify.mo(Shopify.queuemeals,"note");
});
});

$(this) is alerting previous selected values in jquery

I am using $(this) to get the current selected(clicked) element of a specific class .For the first time its coming fine i.e i am getting the selected element but as soon as i click on second time it is giving the alert of the old as well as new selection .I am not able to find out what is the issue..
Here is the code..
$('.l-one').click(function () {
var tableName = $(this).text();
//Table Name Lable
$("#lbl").text(tableName);
//Panel
$("#Perticulars").show();
$('.my-new-three').click(function () {
var dishvalue = $(this).text(); //get the value of dish item and display in the table
//console.log(dishvalue);
alert(tableName);
alert(dishvalue);
if (localStorage.getItem(tableName) != null) {
alert("b");
In the alert(tableName); i am getting alert of all the tables selected previously .Please help me to resolve this..
Thanks...

use below code . only click assign events to each time when you click '.l-one'. so if you click '.l-one' 3 time 'click' event assign 3 time to '.my-new-three'.
unbind() function remove event from element and bind() function attach event to element. so here as per your code each time when you click '.l-one' unbind remove click event from '.my-new-three' and bind function again assign click event to '.my-new-three'.
$('.my-new-three').unbind('click').bind('click',function () {});
other way is to use separate click event methods.
$('.l-one').on('click', function () { });
$('.my-new-three').on('click',function () {})

Use separate click handler instead of using click handler insider another one. Consider this code:
$('.l-one').click(function () {
//code
}
$('.my-new-three').on("click",function () {
//code
}
Assuming If .my-new-three exists inside .l-one or .my-new-three creating dynamically then use this:
$('.l-one').on("click",".my-new-three",function () {
//code
}

load() method is entered (executed) many times

in my html page, i have an image, and on clicking a button, i'm calling the function TestLoad() where it is changing the src of the image and when the image is loaded i'm doing something...
take an example:
javascript:
function TestLoad() {
alert('before');
$('#ImgTest').attr('src', 'Images/Image1.jpg');
$('#ImgTest').load(function () {
alert('after');
});
}
html:
<img id = "ImgTest" alt="" src="" style="width:100px; height:100px"/>
<input type="button" onclick ="TestLoad();" value="TestLoad"/>
my problem is:
when i click the button for the first time, i'm getting the alert "after" one time and if i click another time, the alert will be displayed two time and the third, 3 times...
Kindly advice
Thanks

Each time your handler executes, it adds another new load handler. You only need to assign the handler a single time. If you really need to do it this way, you can either remove the existing handlers first or check the events to see if it's already being handled:
var $imgTest = $('#ImgTest');
$imgTest.attr('src','Images/Image1.jpg');
$imgTest.unbind('load');
$imgTest.load(function(){
alert('after');
});
Or:
var events;
var $imgTest = $('#ImgTest');
$imgTest.attr('src', 'Images/Image1.jpg');
events = $imgTest.data('events');
if(events !== null && typeof events.load === undefined){
$imgTest.load(function(){
alert('after');
});
}

Your onclick event is probably binding another load event.
You don't need to keep adding the event to it. It already exists. If you need to bind another one, you'll want to unbind the previous event first.
.on("load", function() { ... });
.off("load");

You are binding multiple functions in your event handler
//bind this outside of your test load method
$('#ImgTest').load(function () {
alert('after');
});
function TestLoad() {
alert('before');
$('#ImgTest').attr('src', 'Images/Image1.jpg');
}

JavaScript/jQuery - Reusing the event 'Click' of an element

I have an element, a div, for example. And attach an event 'click' to it. In jQuery, it would be:
$('#myDiv').click(function(){
$(".class1").show();
})
Now, I would like to assign a new function "myDiv #", replacing the old. I am doing so:
$('#myDiv').click(function(){
$(".class23").hide();
})
But when I run the 'click' on the div, the function I assigns the beginning of this doubt is performed.
Question: How to remove the function that will run with the click event attributed to an element? (No recreate the element with the new click event...)

You want .unbind.
You can either remove all previous bound functions:
$('#myDiv').unbind('click');
Or if you only want to unbind one specific function:
var show = function() {
$(".class1").show();
};
$('#myDiv').click(show);
and then:
$('#myDiv').unbind('click', show); // unbind first function
$('#myDiv').click(function() { // bind second function
$(".class23").hide();
});
Note that .click(func) is just a shortcut to .bind('click', func).

If you know you'll only want to handle one click on an element, you can use one() which automatically unbinds after a single click:
$("#myDiv").one("click", function() {
$(".class1").show();
$("#myDiv").one("click", function(){
$(".class23").hide();
});
});

Use the JQuery unbind function to remove all click events
$('#myDiv').unbind('click');

Add a counter on the first click event.
var counter = 0;
$('#myDiv').click(function(){
if(counter>1){
$(".class23").hide();
}
else
$(".class1").show();
counter++;
})
just an example..