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
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have written code to add table element and I am trying to console log the onclick function of that class that is not working
add
<div>
<table id="con">
<tr><td class="delete"> something</td></tr>
</table>
</div>
<script>
$("#a").click(function () {
$("#con").append("<tr> <td class='delete'>something</td></tr>")
});
$(".delete").click(function () {
console.log("clicked");
})
</script>
It doesn't work because your click-handler only binds to those elements that are already present on the page at the moment when you bind the handler.
What you need is a delegated event.
Read this to understand what you need to do:
https://learn.jquery.com/events/event-delegation/
The gist of it is this:
Change this...
$(".delete").click(function() {
console.log("clicked");
});
...to this...
$("#con").on("click", ".delete", function() {
console.log("clicked");
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
For some reason when I add a class to an element using Jquery I cannot perform a function using the class name just added:
$('.openslidecontent .arrow.off').click(function() {
$('.openslidecontent,.rightwrapper .arrow').removeClass('off')
$('.openslidecontent,.rightwrapper .arrow').addClass('on');
return false;
});
$('.openslidecontent .arrow.on').click(function() { // THIS FUNCTION DOES NOT EXECUTE
$('.openslidecontent,.rightwrapper .arrow').removeClass('on');
$('.openslidecontent,.rightwrapper .arrow').addClass('off');
return false;
});
The event listener is only attached to existing elements. You can switch to event delegation to have the listener react on newly created elements too
$(document).on('click', '.openslidecontent .arrow', function() {
$('.openslidecontent,.rightwrapper .arrow').toggleClass('on off');
})
Also, as Rory commented, you can just change your code to use toggleClass() and hook the event to both at the same time
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");
});
});
This question already has answers here:
jquery - Click event not working for dynamically created button [duplicate]
(4 answers)
Jquery/Javascript: Buttons added dynamically with javascript do not work
(3 answers)
Closed 8 years ago.
I can't get an alert to trigger when a dynamically generated button is clicked?
The alert is not going to be the final function but was a test to make sure the trigger is working correctly.
I tried a "onclick" function as a trigger and used the id as a jQuery trigger so not sure why it would not work; I will add a snippet below that shows what I mean.
From the file that generates and displays the button (it displays OK):
var modOptsMsg = document.getElementById("modOptionsMessage").value + '<input type="button" id="removePost" onclick="removePost()" value="Remove Post"/>';
$("#modOptsShowMsg").empty().append(modOptsMsg);
Neither of these simple tests work in JS or jQuery:
function removePost(){
alert("alert");
}
$('#removePost').click(function(){
alert("alert");
});
As #Regent has pointed out in the comments, use:
$(document).on("click", '#removePost', function() {
alert("alert");
});
$('#modOptsShowMsg').on("click", '#removePost', function() {
alert("alert");
});
the above code will work..if jquery is lesser than 1.7 use .live() instead of .on()
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.