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>

Can't remove dynamically generated inputs on click [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I was trying to generate a new form group by clicking the button. But after that all I can't remove selected group, because click event doesn't work.
here is fiddle example: https://jsfiddle.net/f4v25ert/
(function($) {
'use strict';
$(document).ready(function() {
$('.add').on('click', function(e) {
e.preventDefault();
$('.groups').append('\
<div class="form-group">\
<input type="text">\
Remove\
</div>\
');
});
$('#remove-input').on('click', '.form-group', function(e) {
e.preventDefault();
$(this).parent('.form-group').remove();
});
});
}(jQuery));

// Here is your working code
(function($) {
'use strict';
$(document).ready(function() {
$('.add').on('click', function(e) {
e.preventDefault();
$('.groups').append('\
<div class="form-group">\
<input type="text">\
Remove\
</div>\
');
});
$(document).on('click','.remove-input' , function(e) {
e.preventDefault();
$(this).closest('.form-group').remove();
});
});
}(jQuery));

You can't have more than one items having the same id on a web page. Use a class instead.
Also, for dynamic binding, you should use
$(document).on('event', 'selector', function(){
/* your code here */
});
(function($) {
'use strict';
$(document).ready(function() {
$('.add').on('click', function(e) {
e.preventDefault();
$('.groups').append('\
<div class="form-group">\
<input type="text">\
Remove\
</div>\
');
});
$(document).on('click', '.remove', function(e) {
e.preventDefault();
$(this).prev().remove();
$(this).remove();
});
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">Add input</button>
<div class="groups">
<div class="form-group"><input type="text"></div>
</div>

Button inside of div not working after clone

Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});

Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {

Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});

Popup onclick Javascript doesn't work

I am building a form which will be loaded in popup by clicking on a text/image. This is my code and it is not working! Any ideas
<div>
Remind me
</div>
<div class="map-popup" id="remindme" style="display:none;">
<form>
<label for="remind_me_email" class="required"><em>*</em>E-Mail Address</label>
<div class="input-box">
<input type="text" id="remind_me_email" title="E-Mail Address" />
</div>
</form>
<div>
<button type="submit" class="button" id="remind_me_submit"><span>Submit</span> </button>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').dialog('open');
return false;
});
});
</script>

$(document).ready(function(){
//open popup
var myPoplink = document.getElementById('remindmelink');
$(myPoplink).on('click',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});

invalid $('.myPoplink') selector. i.e there is no class .myPoplink found in the HTML. Try using $('#remindmelink')
$(document).ready(function(){
//open popup
$("#remindmelink").on('click',function(event){
event.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
});

Just in case put href="#" here is the
jsfiddle
$(document).ready(function(){
//open popup
$(document).on('click','#remindmelink',function(){
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
return false;
});
});

It was jQuery conflict as some javascript was copied inline in some other pages! Solved by removing the inline scripts and using
var j = jQuery.noConlifct();
j(document).ready(function(){
j('#remindmelink').click(function(){
j('#remindme').fancybox();
});
});

You can try this:
$(document).on('click','#remindmelink',function(e){
e.preventDefault();
alert('Hello!'); // to be replaced with $('#remindme').dialog('open');
});
UPDATE:
jQuery(document).ready(function(){
jQuery('#remindmelink').click(function(){
e.preventDefault();
jQuery('#remindme').show();
jQuery('#remindme').dialog('open');
return false;
});
});
DEMO

Jquery html attr radio input alt content

I want to use Jquery Attr.Radio Button click and write to #RadioDesc id's div...
<input type="radio" desc="sample description" class="AddText">
<script type="text/javascript">
$( document ).ready( function() {
$("radio").click( function() {
$("#RadioDesc").attr("desc");
});
});
</script>
<div id="RadioDesc"></div>
These codes not work...Please help me solutions...

your selector is invalid, change:
$("radio").click(function(){
to
$( document ).ready( function() {
$(":radio").click( function() {
//add to html
$("#RadioDesc").html($(this).attr("desc"));
});
});

Html:
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
Js:
$(document).ready(function() {
$("input[type=radio]").click(function(){
$("#RadioDesc").text($(this).attr("desc"));
});});
Working Fiddle

The radio selector is :radio
$(document).ready(function () {
$(":radio").click(function () {
$("#RadioDesc").html($(this).attr('src'));
});
});

Your selector isn't targeting the radio, its targeting an element radio
try this:
$('input[type=radio]')

You should change div's html to radio's attribute value
<input type="radio" desc="sample description" class="AddText">
<div id="RadioDesc"></div>
<script type="text/javascript">
$( document ).ready( function() {
$("input:radio").click( function() {
$("#RadioDesc").html( $(this).attr("desc") );
});
});
</script>