enable the button to be clicked only to once exception? - javascript

I use a dialog to get the user input, but I found the user may click double click the button and added the content twice, the cause is the dialog fadeout too slow or the user clicked twice on the mouse.. I don't want to adjust the fadeout speed, instead, how to enable the button only can be clicked once?


jQuery provides the one() method to register a one-shot handler that will only run once.
You can write:
$("#yourButton").one("click", function() {
// Add content...
});


You can disable the button once it was clicked to prevent any further clicks:
$('button').on('click', function() {
$(this).prop('disabled', true);
});


Here is my suggestion. If you are destroying the dialog on exit, just unbind the click event
$('.my-button').on('click', function(){
// process code
$(this).off('click');
});
You can read about off here
And here is a demo. First will not allow other clicks but the second will.
source


Here is a Plunker that shows how you can do this. Pretty much all you need to do is add the following line in your button:
onClick="this.disabled = true;"
So that your button HTML will look something like this:
<button type="submit" onClick="this.disabled = true;">Submit</button>


try this:
$('.myButton').click(function(){
$(this).attr('disabled',true);
....
})


try this with css
$("#yourButton").one("click", function() {
$(this).css('pointer-events', 'none');
})

Related

span inside of lightbox won't trigger function

I have added a CodePen Demo
I'm trying to make the lightbox close when the close button is clicked. Currently, the lightbox will only "close" or trigger the close function on the background only.
Not sure what I'm doing wrong.
CodePen Demo
So far I have tried these slectors that don't trigger the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')

You should bind the click event on the document using $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); because the div lightbox-item is empty when you run $('.lightbot-item .close-button').click(function(){ closeLightbox(); }); at the end of your code.
You can also bind the click event after you append the content in the function openLightbox. It would look like this
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I created a fork of your pen using the first solution.

JQuery event not firing to fade out alert box

This problem is bugging me out a bit. Should be a very simple solution but I can't quite grasp it. What I am doing is creating several nested elements via Jquery and then removing it from the page using JQuery.fade() method.
The close button on the element created does not fire the event but if applied to an independant button, it works.
Javascript:
$( document ).ready(function() {
$("button.create").click(function(){
// action goes here!!
// $(".alertBox").fadeIn();
$('.alerts').append('<div class="alertBox"><span class="hide">X Close</span><p><strong>Alert!</strong> Thank you for submitting your comment. Scroll to the bottom of the page to view it.</p></div>');
return false;
});
$("button.close").click(function(){
// action goes here!!
$(".alertBox").fadeOut();
return false;
});
$(".hide").click(function(){
// action goes here!!
alert("check check");
$(".alertBox").fadeOut();
});
});
HTML:
<h1>Fun with Alert Boxes</h1>
<p>This page is to test the ability to add or remove alert boxes from the DOM. By clicking on the button below, you will make an alert box appear and then you will be able to close the alert box with a button in the top right corner. This will all rely on JQuery to add and remove content from the DOM.<p>
<div class="alerts"></div>
<p> </p>
<button class="create">Create Alert</button>
<button class="close">Destroy Alert</button>
And I have a Fiddle for it http://jsfiddle.net/coolwebs/5n5nosdc/4/ - I have checked it with Console log and can't see any obvious errors. Obviously the issue is that because the function is declared before the element is available on the page, is it possible that that is why it does not work?
Update: Did some testing by generating the script dynamically and it proved my suspicion.

Use Event delegation for dynamically created elements
$('.alerts').on('click', '.hide', function(){
// action goes here!!
alert("check check");
$(".alertBox").fadeOut();
});
For your reference study Event Delegation in SO

Use event delegation for dynamically created events. Also I guess when you click the close button, you want to fadeOut that particular alertBox. Use this code.
$('.alerts').on('click', '.hide', function(){
// action goes here!!
alert("check check");
$(this).closest('.alertBox').fadeOut(); //See this
});
Fiddle

How to get JQuery.trigger('click'); to initiate a mouse click

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.

You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/

You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);

This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});

See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}

May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})

jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});

Try this that works for me:
$('#bar').mousedown();

Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.

Just use this:
$(function() {
$('#watchButton').trigger('click');
});

You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

jQuery - trigger a custom event on a link

I am trying to run this custom 'getOffer()' event using jQuery
<img src="images/img.jpeg">
I have tried the following but it doesn't seem to work (I am using the Firefox Firebug console.log window)
$('a[title="Submit for offer"]').trigger('getOffer');
This is the page I am trying this on: http://bit.ly/1dpIMFk
Can anyone suggest any ideas?

<img src="images/img.jpeg">
$(document).ready(function(){
$('a[title="Submit for offer"]').trigger('getOffer');
});
function getOffer(){
alert('link clicked');
}
Seems working fine for me.I think you didnt wrapped your event trigger in document ready.
DEMO

You can use
<img src="images/img.jpeg">

Creating an custom event on jQuery
First add some identifier (id/class) to your link
<a id="linkOffer" title="Submit for offer"><img src="images/img.jpeg"></a>
Then, create your CUSTOM event.
//The function that will to the getOffer things
function getOffer() {
//Do get offer...
}
$(document).ready(function(){
//Custom event pointing to the function
$('a#linkOffer').on('getoffer',getOffer);
//Default click event
$('a#linkOffer').on('click',function(e){
//Do click stuff.
//Trigger your custom event.
$(this).trigger('getoffer');
//If you wish to not move the page, prevent the default link click behavior (moveing to other page)
e.preventDefault();
});
});

Trigger will not function because it search click attribute in element. Work around for this can be is:
Add click attribute to the element and then call the jquery function.
<button value="yu" onclick="getOffer();"/>
<script>
$("a[title='Submit for offer']").attr("onclick",$("a[title='Submit for offer']").attr('href')); // get value from href
$("a[title='Submit for offer']").trigger('click');
function getOffer()
{
alert('j');
}
</script>

Click span inside jQuery button

Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.

Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});

or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/

Categories