Develop Reference

How to add only one click event on a label?

Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>

example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})

So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>

When checkbox is checked show hidden button and hide the visible button

I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>

Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>

Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.

Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>

How to show a div when a particular button is clicked,

This my js code:
i want to click first button to call a new class,it works but, every
button doing same work. when i click second button this also calling
a new class.please help me to solve this.
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
this my html code:
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>

You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.
<button id ='myBtn' >first</button><br>
$("#myBtn").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});

You can use contains('first').
The thing is that your using button as selector, that will not understand which button is clicked actually.
I would recommend, To make jQuery understand you should provide any specific id to that element.
But if you want to do it based on the text inside a DIV, you can use contains('first').
$(document).ready(function(){
$("button:contains('first')").click(function(){ /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>first</button><br>
<button>second</button><br>
<button>third</button><br>
<div class="new" style = "display: none;">hi.</div> <!--i need to call only this class-->
<div class="old">hello.</div>

$(document).ready(function() {
$("button").eq(0).click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>first</button>
<br>
<button>second</button>
<br>
<button>third</button>
<br>
<div class="new" style="display: none;">hi.</div>
<!--i need to call only this class-->
<div class="old">hello.
</div>
use .eq() to select which button you need the click
Note: eq() is index based which starts with 0

With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:
<button id="firstBtn">first</button><br>
<button id="secondBtn">second</button><br>
<button id="thirdbtn">third</button><br>
And then call them with the id selector # like so: $("#firstBtn").click()..

Remove the inline style and use a separate css class
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggleClass('hide'); /*new class calling */
});
});
CSS
.hide {
display:none;
}
JSFIDDLE

If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click
<script>
$(document).ready(function(){
$("button").click(function(){ /*button click event*/
if ($(this).text() == "first" ) $(".new").toggle(); /*new class calling */
});
});
</script>
set id is the better
<button id="first">first</button><br>
<button>second</button><br>
<button>third</button><br>
<script>
$(document).ready(function(){
$("#first").click(function(){ /*specific button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>

give id's to the buttons, n call those accordingly like
$("#first").click(function(){
$(".new").toggle();
});

How to alert the user if he clicks on a div rel?

This is the code of a wikieditor!
div rel="wikiEditor-ui-view-preview" class="current">
The class changes to 'current' when the user clicks on Preview. How can I alert the user, if he clicks on Preview?

This mocks the behaviour itself. For example, this will toggle the class of the parent to add current class. Just to prove that this check on it's class works
$("a").on('click', function() {
if ($(this).text() === "Preview") {
$(this).parent().toggleClass("current");
checkCurrent();
}
});
function checkCurrent() {
if ($('div[rel="wikiEditor-ui-view-preview"]').hasClass("current")) {
alert("hasClass");
}
}
This will evaluate if the element has that specific class when clicked, if it does then the alert will fire
jsFiddle like what you want.
(The link was updated to be more similar to your question)

You can simply activate a function on a rel tag like this:
$('div[rel="wikiEditor-ui-view-preview"]').on('click', function(){
alert('hi');
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div rel="wikiEditor-ui-view-preview">
test working
</div>
And you can combine that with a class like this:
$('div[rel="wikiEditor-ui-view-preview"].active').on('click', function(){
alert('hi');
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div rel="wikiEditor-ui-view-preview" class="active">
test working because active class
</div>
<div rel="wikiEditor-ui-view-preview" class="anotherclass">
test not working because not active
</div>

How to addClass and remove Class when clicking a link?

I'm trying to make some elements active when I click on a link. I'm at this code right now which let's me add and remove active class when I click on element with class 'test'. What I need is to click a link and have the same behaviour to the div elements.
I have:
$('.test').on('click',function(){
$('.test.active').removeClass('active');
$(this).addClass('active');
});
.active{
color: #F00;
}
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href=''>Click me</a>
This code adds and removes the active class when I click the divs. How to do the same thing by clicking the link?

When you click a link, the behavior and the method will be the same as if you click a button, a div, or any other element of the page.
The difference is that an <a> element will redirect you to another page (inclusive if it's "the same" where you come from) and the changes won't be noticeable.
You will need to use $("element").addClass("class");

Add href="javascript:;" if to avoid redirection.
In jQuery below snippet will work:
$('.link').on('click', function(){
$(this).toggleClass('active');
})
Working Fiddle
Update
To highlight multiple divs
$('.link').on('click', function(){
if($('.test.active').next().hasClass('test'))
{
$('.test.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.test.active').removeClass('active');
$('.test:first').addClass('active');
}
})
Updated Fiddle

Your code should be:
$('.link').on('click', function () {
var $nextActive = $('.test.active').next('.test').length ? $('.test.active').next('.test') : $('.test').first();
$('.test.active').add($nextActive).toggleClass('active');
return false;
});

You can do like following. It will add and remove active class on link click.
$('.link').on('click', function(){
$('.active').removeClass('active').siblings('.test').addClass('active');
});
.active{
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test active'>test</div>
<div class='test'>test</div>
<a class='link' href='#'>Click me</a>
Edit:
This will work for infinite div.
JQuery:
$('.link').on('click', function(){
if($('.active').next().hasClass('test'))
{
$('.active').removeClass('active').next('.test').addClass('active');
}
else
{
$('.active').removeClass('active');
$('.test:first').addClass('active');
}
});
Fiddle

Just remove .active class.
below code is working.
$('.test').click(function(){
$('.test').removeClass('active');
$(this).addClass('active');
});

replace js function
$('.test').on('click',function(){
$('.test').removeClass('active');
$(this).addClass('active');
});
Demo Link https://jsfiddle.net/ffjcfb2b/

According to your post and comments you'd like to use link as class changer for divs. Here you go. Edited!
$('.link').on('click', function(){
$('.test.active').toggleClass('active').next().addClass("active");
});
Working fiddle