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>
Related
I'm trying to make a script that allows me to click on one div and that click triggers click on another. This another element is outside and nowhere near this first element. These elemnts i want to trigger click on are dynamically generated. Site runs on wordpress.
Here are elements im clicking on, just simple divs, eleven dives total:
<div id="jedna">
</div>
<div id="dva">
</div>
<div id="tri">
</div>
etc..
Here are elemts i want to trigger click event on, these are generated:
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="1" data-swiper-slide-index="1"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="2" data-swiper-slide-index="2"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="3" data-swiper-slide-index="3"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="4" data-swiper-slide-index="4"></div>
I belive the only problem is that attaching events on these elements is not working even tho i attached it.
Here is full script, clicking function and attaching of events onto data-slide-number identifiers:
<script>
var $=jQuery.noConflict();
$(document).on('click', '#jedna', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#dva', function(event) {
console.log($(this).html());
$('[data-slide-number="1"]').click();
});
$(document).on('click', '#tri', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#styri', function(event) {
console.log($(this).html());
$('[data-slide-number="3"]').click();
});
$(document).on('click', '#pat', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sest', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sedem', function(event) {
console.log($(this).html());
$('[data-slide-number="6"]').click();
});
$(document).on('click', '#osem', function(event) {
console.log($(this).html());
$('[data-slide-number="7"]').click();
});
$(document).on('click', '#devat', function(event) {
console.log($(this).html());
$('[data-slide-number="8"]').click();
});
$(document).on('click', '#desat', function(event) {
console.log($(this).html());
$('[data-slide-number="9"]').click();
});
$(document).on('click', '#jedenast', function(event) {
console.log($(this).html());
$('[data-slide-number="10"]').click();
});
document.querySelectorAll('[data-slide-number]').forEach(item => {
item.addEventListener('click', event => {
console.log(item.getAttribute("data-slide-number"));
})
})
</script>
Any idea what am i missing ?
Here is website where you can check it out: http://www.sajdikyapartments.sk/
Its exactly in the middle, i want to click on building on image, that have hover efects on divs at top of them, and with that trigger clicking on tabs right above the image (01 Apartman, 02 Apartman etc..)
You're looking for .trigger( "click" ); (see JQuery documentation here https://api.jquery.com/trigger/).
So something like this maybe...
$(document).on('click', '#jedna', function() {
$('*[data-slide-number="0"]').trigger('click');
});
I'm trying to load a jQuery datepicker for input fields which are added using append();
The datepicker is loading fine for the first input field, but for any additional ones added it does not load, see JSFiddle for an example here: https://jsfiddle.net/exsupjy2/1/
HTML:
<button class="add-seasonal-filter button-primary" type="button">Add Date</button>
<div class="seasonal-filter-wrapper-outer"></div>
<div class="seasonal-filter-wrapper" style="display:none;">
<input type="text" name="seasonal-date-from" class="datepicker" />
</div>
JS:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});
You just need to update JavaScript 100% working:
Need to removeClass('hasDatepicker') before adding..
See here:
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
JavaScript:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});
$(document).ready(function() {
$('#btnadddate').click(function(){
$('#content').append('<br>a datepicker <input class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
});
<button id="btnadddate">add a datepicker</button>
<div id="content">
Add Date <input class="datepicker_recurring_start" name="seasonal-date-from"/>
</div>
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
});
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>
I have approximately such structure:
<div class='container'>
<div class='element' data-id='1'></div>
<div class='element' data-id='2'></div>
<div class='element' data-id='2'></div>
</div>
Where .elements' are rendered dynamically.
So I wrote handler for these elements:
jQuery('.container').on('click', '.element', function () { //code })
But I need to do something with element, which was clicked.
How could I get clicked element?
The clicked element will be this in your event handler function.
jQuery('.container').on('click', '.element', function () {
// use "this" or "jQuery(this)", depending on your needs
})
Note that this will point to a DOM element, in your case a <div>.
You have to do something with the target of the event.
Something like :
jQuery('.container').on('click', '.element', function (event) {
var clickedelement = $(event.target);
//code
})
HTML:
<div class='container'>
<div class='element' data-id='1'/>
<div class='element' data-id='2'/>
<div class='element' data-id='2'/>
</div>
Javascript:
$(function () {
$('.container').on('click', '.element', function () {
$clickedElement = $(this);
$data-id = $clickedElement.attr('data-id');
});
});