We Keep Coding

Need to click twice to trigger .one() function

I needed to geta toggle function in my code, so I searched for it and got this. Now I implemented it into my code (below code is simplified), but you have to click the button twice to make it work properly. After clicking twice it works normally.
What causes this problem and how can I fix this?
var triggerbtn = $('#trigger');
function showThis() {
triggerbtn.text('Show this!');
$(this).one("click", hideThis);
}
function hideThis() {
triggerbtn.text('Hide this!');
$(this).one("click", showThis);
}
triggerbtn.one("click", showThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>

The default state of button is show and on first click you are again trying to show it. It should have been hide for first click
var triggerbtn = $('#trigger');
function showThis() {
triggerbtn.text('Show this!');
$(this).one("click", hideThis);
}
function hideThis() {
triggerbtn.text('Hide this!');
$(this).one("click", showThis);
}
triggerbtn.one("click", hideThis); // Here is the change
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="trigger">Show this!</button>

Disable submit button on first click with Jquery

I currently have a lightbox popup attached to a submit button that shows only the first time the submit button is clicked. Basically before someone submits a form, we want them to see this popup when they hit the submit button. And that all works fine, but now I need to make it to where on that first click, the form doesn't submit/process. However, after that first click, the submit button would need to be enabled to where they can submit the form.
Any idea how to change the below code to where the submit button does not process the form only the first time the submit button is clicked?
<script type="text/javascript">
$('#Submitbutton').one("click",function(e) {
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
});
</script>

var hasClicked = false;
$('#Submitbutton').on('click',function(e) {
if (hasClicked === true) {
//submit form here
} else {
e.preventDefault();
hasClicked = true;
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
}
});
Sets a variable on first submit, then on second submit does something different because of that variable.
Edit: Consistent quotes and code cleanup.

Change .on() from .one(). You can declare a variable to track whether button was clicked or not.
var isAlreadytClicked = false;
$('#Submitbutton').on("click", function (e) {
if (isAlreadytClicked == false) {
isAlreadytClicked = true;
return;
}
if (isAlreadytClicked) {
//Do whatever you want on subsequent click
}
});

add the line
$('#SubmitBtn').attr('disabled',false);
inside the if block.

You can use the counter to determine clicked count:
var count = 0;
$('#Submitbutton').click(function(e) {
count++;
if(count==1)
return;//return if clicked first time
$('#lp').lightbox_me({centered: true,overlayCSS:{background: '#481d33', opacity: .45},overlaySpeed:0,lightboxSpeed:0});
});

<input type="button" id="SubmitBtn" value="Submit" onclick="return submitData();" disabled="disabled" >
In Script
//create a global variable for clicked or not
var submitBtnClicked = false;
function submitData()
{
if(submitBtnClicked )
{
$('#SubmitBtn').attr('disabled',false);
submitBtnClicked =true;
}
}

simply a return false should do.
alternatively e.perventDefault() may help for event bubbling.
$('#Submitbutton').one("click",function(e) {
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
e.perventDefault();
return false;
});

Prevent click after focus event

When user clicks on input field, two consecutive events are being executed: focus and click.
focus always gets executed first and shows the notice. But click which runs immediately after focus hides the notice. I only have this problem when input field is not focused and both events get executed consecutively.
I'm looking for the clean solution which can help me to implement such functionality (without any timeouts or weird hacks).
HTML:
<label for="example">Example input: </label>
<input type="text" id="example" name="example" />
<p id="notice" class="hide">This text could show when focus, hide when blur and toggle show/hide when click.</p>
JavaScript:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('click', _onClick);
function _onFocus(e) {
console.log('focus');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
$('#notice').removeClass('hide');
}
function _onClick(e) {
console.log('click');
$('#notice').toggleClass('hide');
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}
UPDATED Fiddle is here:

I think you jumbled up the toggles. No need to prevent propagation and all that. Just check if the notice is already visible when click fires.
Demo: http://jsfiddle.net/3Bev4/13/
Code:
var $notice = $('#notice'); // cache the notice
function _onFocus(e) {
console.log('focus');
$notice.removeClass('hide'); // on focus show it
}
function _onClick(e) {
console.log('click');
if ($notice.is('hidden')) { // on click check if already visible
$notice.removeClass('hide'); // if not then show it
}
}
function _onBlur(e) {
console.log('blur');
$notice.addClass('hide'); // on blur hide it
}
Hope that helps.
Update: based on OP's clarification on click toggling:
Just cache the focus event in a state variable and then based on the state either show the notice or toggle the class.
Demo 2: http://jsfiddle.net/3Bev4/19/
Updated code:
var $notice = $('#notice'), isfocus = false;
function _onFocus(e) {
isFocus = true; // cache the state of focus
$notice.removeClass('hide');
}
function _onClick(e) {
if (isFocus) { // if focus was fired, show/hide based on visibility
if ($notice.is('hidden')) { $notice.removeClass('hide'); }
isFocus = false; // reset the cached state for future
} else {
$notice.toggleClass('hide'); // toggle if there is only click while focussed
}
}
Update 2: based on OP's observation on first click after tab focus:
On second thought, can you just bind the mousedown or mouseup instead of click? That will not fire the focus.
Demo 3: http://jsfiddle.net/3Bev4/24/
Updated code:
$('#example').on('focus', _onFocus)
.on('blur', _onBlur)
.on('mousedown', _onClick);
var $notice = $('#notice');
function _onFocus(e) { $notice.removeClass('hide'); }
function _onClick(e) { $notice.toggleClass('hide'); }
function _onBlur(e) { $notice.addClass('hide'); }
Does that work for you?

Setting a variable for "focus" seems to do the trick : http://jsfiddle.net/3Bev4/9/
Javascript:
$('#example').on('focus', _onFocus)
.on('click', _onClick)
.on('blur', _onBlur);
focus = false;
function _onFocus(e) {
console.log('focus');
$('#notice').removeClass('hide');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
focus = true;
}
function _onClick(e) {
console.log('click');
if (!focus) {
$('#notice').toggleClass('hide');
} else {
focus = false;
}
}
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide');
}

If you want to hide the notice onBlur, surely it needs to be:
function _onBlur(e) {
console.log('blur');
$('#notice').addClass('hide'); // Add the hidden class, not remove it
}
When doing this in the fiddle, it seemed to fix it.

The code you have written is correct, except that you have to replae $('#notice').removeClass('hide'); with $('#notice').addClass('hide');
Because onBlur you want to hide so add hide class, instead you are removing the "hide" calss.
I hope this is what the mistake you have done.
Correct if I am wrong, Because I don't know JQuery much, I just know JavaScript.

you can use many jQuery methods rather than add or move class:
Update: add a params to deal with the click function
http://jsfiddle.net/3Bev4/23/
var showNotice = false;
$('#example').focus(function(){
$('#notice').show();
showNotice = true;
}).click(function(){
if(showNotice){
$('#notice').show();
showNotice = false;
}else{
showNotice = true;
$('#notice').hide();
}
}).blur(function(){
$('#notice').hide();
});

Run button click event only once further clicks needs to be forwarded to other function

I have a button as follows
<input type="button" id="btn" value="Click Me" />
and I have 2 functions
function event1(){
alert("1st Time Clicked");
}
function event2(){
alert("Further Clicks");
}
I want to run event1 function for 1st time when the user clicks on that button and for subsequent requests I need to run event2 function.
I tried the following way
$(document).ready(function(){
$("#btn").one("click",function(){
event1();
});
});
But I can't figure it out how to run event2 function for further clicks.
How Can I do that in Jquery ?
I created Jsfiddle = http://jsfiddle.net/rajeevgurram/d9Z3c/

In the first click handler(using .one()), register a normal click handler so that further clicks will trigger that handler
$(document).ready(function () {
$("#btn").one("click", function () {
event1();
$(this).click(event2)
});
});
Demo: Fiddle

I like booleans so I use
$(document).ready(function(){
var clicked = false;
$("#btn").on("click",function(){
if(!clicked) {
event1();
clicked = true;
} else {
event2();
}
});
});
P.S. I just wanted to be different from the first answer. XD

Get state of checkbox using javascript

I'm trying to write a javascript with jquery which should be able to pick out and use information on if a checkbox is checked or not. This should happen every time the checkbox(has id 'edit-toggle-me') is clicked. I've written a test function for this with some alert() in it to see if I've succeeded or not.
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
if ($('#edit-toggle-me').checked()) {
alert('Yup!');
}
else {
alert('Nup!');
}
});
});
})(jQuery);
It perform neither of the alerts so I'm guessing it crashes at $('#edit-toggle-me').checked(). I don't know why though.
I've also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var elementy = document.getElementById('edit-toggle-me');
var check = elementy.value;
alert(check);
if(elementy.checked()) {
alert('yup');
}
});
});
})(jQuery);
The first alert works, but neither or the last two 'yup' or 'nup'.
And then I also tried this:
(function ($) {
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
var element2 = document.getElementById('edit-toggle-me');
var check = element2.value;
alert(check);
});
});
})(jQuery);
This always return 1. Which I don't understand why either.
Grateful for any hints.

Use .is(':checked'). You can find the documentation HERE.
JSFIDDLE

There is no such method as .checked() in jQuery or in the DOM API. There is simply a .checked property on the element that is true if the element is checked, false otherwise. Try this:
(function ($) {
"use strict";
$(document).ready(function () {
$('#edit-toggle-me').click(function(){
alert( this.checked ? ":)" : ":(" );
});
});
})(jQuery);
See demo: http://jsfiddle.net/scZ3X/

$(function(){
$('#edit-toggle-me').on('change', function(){
if($(this).is(':checked')) {
alert('checked');
}
else {
alert('unchecked');
}
});
});
You should have to use �change� event instead click. Because In some cases click event is not good to use in check box and radio buttons.
Example 1:
If you have a radio button have click event bind. In case your radio button is already true and you clicking in radio button. It�s not change radio button value, But your click event fire every time.
But in case if you use change event. Your event will fire only if your radio button value got change(If it�s already not checked or true)
Example 2:
If you have any label for any radio button or check box. In case you have click event bind in checkbox or radio button. On click of your label your check box or radio button value got change but your click event will not call.
In case of change event. It�ll work as expected on click of label related label too.

Try this:
$('#edit-toggle-me').is(':checked')