Need to click twice to trigger .one() function - javascript

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>

Related

Toggle click function

Okay, so i successfully toggled a bool and some other options.
But whenever i make another click function for another button to toggle the bool to false, it doesn't work.
My code:
let managementbool = false;
$("#management").on('click', function(){
managementbool = true;
if(managementbool)
{
$(".dot1").hide();
$(".dot2").hide();
$(".topbar").hide();
$(".boostingtext").hide();
$(".mainbar").hide();
$("#container").hide();
$(".dot11").show();
$(".dot22").show();
$(".topbar1").show();
$(".boostingtext1").show();
$(".mainbar1").show();
}
});
$("#contracts").click(function () {
managementbool = false;
$(".dot11").hide();
$(".dot22").hide();
$(".topbar1").hide();
$(".boostingtext1").hide();
$(".mainbar1").hide();
$(".dot1").show();
$(".dot2").show();
$(".topbar").show();
$(".boostingtext").show();
$(".mainbar").show();
$("#container").hide();
});
First button to toggle it to true works, but whenever i click the button that sets it to false. Nothing happens.
You didn't add your function correctly. $("#contracts").on('click', function() { ... }); should work.
Also take a look at whether you really need your managementbool variable. When I click on #management you set it to true and thus always execute the code in your if-statement, making the if-statement redundant. In the code segment you show, it seems you never actually do anything based on the value of managementbool.
$("#show").on('click', function() {
$("#some_element").show();
});
$("#hide").on('click', function() {
$("#some_element").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show">Show</button>
<button id="hide">Hide</button>
<div id="some_element">Test</div>

Javascript event triggering creating multiple button .on('click)

I'm using HTML slim for the code below.
.page
.paper
button.button.js-copier I copy things
- content_for :js_includes do
javascript:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.js-copier').each(function () {
$(this).on('click', function () {
$('.page').append(startingHtml);
$(document).trigger('page-refreshed');
});
});
}
// Run it right away
initializePlugin();
$(document).on('page-refreshed', initializePlugin);
Is there a way to fix the fact that when I click on the "I copy things" button, it creates multiple copies of the button as it is iterating over all the button from the button that was selected?
Also, is there a better way to write this code. All I'm trying to do is duplicate the button anytime I click on any buttons(first and any new button created buttons)
-Anthony
First change this:
$('.js-copier').each(function () {
$(this).on('click', function () {
...
to this:
$('.page').on('click', '.js-copier', function () {
...
Read this to understand https://learn.jquery.com/events/event-delegation/#event-propagation
Then remove the 'page-refreshed' event because you don't need it:
$(document).trigger('page-refreshed');
...
$(document).on('page-refreshed', initializePlugin);
Demo solution:
var startingHtml = $('.page').html();
function initializePlugin() {
$('.page').on('click', '.js-copier', function () {
$('.page').append(startingHtml);
});
}
// Run it right away
initializePlugin();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="paper">
<button class="button js-copier"> I copy things</button>
</div>
</div>

Call a function in javascript only after page load

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>
Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}
The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>
I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}

Jquery click event on button without class or id

I have this button that I can't change, nor can I edit toCashier():
<input type="button" value="Till kassan" onclick="toCashier()">
And I want to track if it's clicked and execute some javascript.
$(document).ready ( function () {
$('button[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
I tried that but it doesn't seem to work. I tried various things but can't get it to work.
You have mismatched input and button, try the following :
$(document).ready ( function () {
$('input[value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
Or
$(document).ready ( function () {
$('input[type="button"][value="Till kassan"]').on('click', function(){
alert("Night button clicked");
});
});
button !== input
You need to use the correct selector.
$('input[value="Till kassan"]')
If you make the click with function, toCashier() function need to create :
function toCashier(){
alert("Night button clicked");
}

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

Categories