This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am trying to color tr with .click event using jquery.
My code has no problem with coloring the first row which is static, but other rows, created with jQuery don't want to color.
I have no idea why is not working on other rows.
$(function () {
$('tr').click(function () {
$(this).toggleClass("obarva");
});
});
Here is my existing code: `http://jsfiddle.net/1mihcc/7okvbkg2/1/
That's because the elements are not in the DOM when you run the jQuery selector. Use event delegation.
$(function () {
$(document).on('click', 'tr', function () {
$(this).toggleClass("obarva");
});
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
So I've got a table of 'skills' for which an input looks up an array to check if it can be added to a current skills array to be displayed in the table.
Each row has a remove button, however adding new rows to the table - the remove button doesnt seem to work.
Here is the JSFiddle I'm using: https://jsfiddle.net/hyc61qtx/
This is how I currently remove the table row:
$('.remove-skill').on('click', function() {
var $kill = $(this).parent('td').parent('tr');
$kill.addClass('danger');
$kill.fadeOut(1250, function() {
$(this).remove();
});
});
You are getting all elements which are presented now on the page and subscribe on their click event, but it will not affect elements added later. You need to subscribe on document with filtering by target.
This should work:
$(document).on('click', '.remove-skill', function() {
var $kill = $(this).parent('td').parent('tr');
$kill.addClass('danger');
$kill.fadeOut(1250, function() {
$(this).remove();
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
html:
<div class="testSpanDiv"></div>
javascript:
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
}
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
Event is not firing while giving a click to span element added dynamically.
Event is firing if span element is statically added to the html.
Can you give any suggestion over it.
I tried like below also, but not working.
$('#testSpan').on('click', '.testSpanDiv', function(){
$(this).parent().remove();
});
You need to use like this:
$('.testSpanDiv').on('click', '#testSpan', function(){
// ^^ parent div ^^ element in which you want to bind the function
$(this).parent().remove();
});
your syntax error try this way
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
});
https://jsfiddle.net/7x8jbLpt/
You can delegate the event from body
Also note there are some syntax error in your code
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
})
$('body').on('click', '#testSpan', function(){
alert("Hello")
});
JSFIDDLE
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have a checkboxlist from which I want to get check event.
the checkboxes are created dynamically.
I am not able to fire the event
what I tried so far is
$(".XAxisrowCheckbox").click(function () {
//Do stuff
});
I also tried with this
$("input.XAxisrowCheckbox").click(function () {
//Do stuff
});
but no luck for me. Tag goes like this:
<input type="checkbox" class="XAxisrowCheckbox">
Please suggest something.
jQuery.on accepts selector as an argument (http://api.jquery.com/on/)
Example:
$(document).on('click', '.XAxisrowCheckbox', function () {
//do stuff
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
First the error which i am recievieng is undefined is not a function.
I am generating a table on ajax call by button click. The problem is that the click event on cell is not performing.
my code is like
$(document).ready(function () {
$('#btnCall').click(function () {
$.ajax({....
success: function (data) {
//Here i am creating a table with id = myTable
}
});
});
//After ajax call completed i am using this
//but this is not happening
//i want to show alert when cell clicked of the table
$("#myTable tr td").click(function(event) {
alert(event.pageX);
alert(event.pageY);
});
});
You need to use jquery on event .
$("#myTable tr td").on('click', function(event) {
alert(event.pageX);
alert(event.pageY);
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have the following code:
<script type="text/javascript">
$(function () {
$(".wrapper1").scroll(function () {
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function () {
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});
</script>
But my HTML is dynamic and added later. Is there a way that I can use this code outside of the dynamically added HTML so that it works after the HTML is loaded ?
You can use event delegation. Use
$(document).on('scroll', '.wrapper1', function () {
instead of
$(".wrapper1").scroll(function () {
and similarly for all the dynamically loaded elements.
More info here
Take a look at the .on() property to delegate dynamically created elements.