This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
JavaScript does not fire after appending [duplicate]
(3 answers)
Closed 7 years ago.
Working on a poll/voting system where people can click to see results before voting, and then click back again to see the options once more.
The problem is when loading in the results, the button I load to show the options again won't seem to work:
The code for them is basically the same (I've put an alert to test if it was even picking up the button, it is not):
$('.results_button').click(function() {
var poll_id = $(this).data('poll-id');
$('.poll_content').load('/includes/ajax/poll_results.php', {'poll_id':poll_id});
});
$('.back_vote_button').click(function() {
window.alert("Test");
//var poll_id = $(this).data('poll-id');
//$('.poll_content').load('/includes/ajax/poll_options.php', {'poll_id':poll_id});
});
The actual code to the back_vote_button is this for example:
<button name="pollresults" class="back_vote_button" data-poll-id="1">Back to voting</button>
Is there something I am missing about interacting with jquery loaded content?
Is your button being created after the doc is loaded? If doesn't exist at the time that the document is created, the listener is not bound. You can either bind a listener event or you can change the click to listen to an already created object, for a bad example try this:
$(document).on('click', '.back_vote_button', function(){
window.alert("Test");
});
this should work but it will listen every time you click on the body and then determine what you clicked on if this were the problem.
Related
This question already has answers here:
How to prevent attaching event handler multiple times?
(3 answers)
How to prevent events from being bound multiple times
(5 answers)
Closed 11 months ago.
I have a function which have multiple onChange events inside of it. Let's take a simple example with one event.
Now when I click the button the loadScript() loads and then if #domelement changes, I get the console log. But if I click the button multiple times, the script is loaded multiple times...and then onChange event I get console log multiple times, as many times as I clicked the button.
Pardon my simple code, I hope it helps you understand my problem. I want to load the script once on button click.
function loadScript() {
$('#domelement').on('change', function() {
console.log('Dom Element Changed');
})
}
$('#load').on('click', function() {
loadScript();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="load">LoadScript</button>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have a sample
my JS code sample:
$('.owl-next, .owl-prev').on("click", function() {
alert("1");
});
There is a click event on two buttons, the problem is that these two div's configure consecutively, and the event I need doesn't work.
I need a suggestion how to make the click event on the two buttons work, even if the buttons appear later.
My javascript code uploads too quickly.
Use document.ready(). It won't set the code unless the site content and it's components are fully loaded.
Note: this solution doesn't work for asynchronous calls, used for dynamical adding elements into DOM. If you want to add your elements dynamically, check following link:
Event binding on dynamically created elements?
$(document).ready(function() {
$('.owl-next, .owl-prev').on("click", function() {
alert("1");
});
});
This question already has answers here:
Why doesn't this jQuery event to fire in gmail?
(4 answers)
Closed 8 years ago.
I'm creating a Google Chrome extension and I try to modify Twitter's homepage code for that.
I need to be notified whenever a user clicks on a --- More button which are present in every tweet. Basically I use the following event delegation code :
$(document).on('click', '.dropdown-toggle', function() {
console.log('Hi !');
});
It works for all tweets on the homepage and those loaded via Ajax (that's why I use event delegation :D), but it doesn't work on the sub-tweets/answers that appear when you expand a tweet in the timeline. Yet the menus still have the dropdown-toggle class but the callback doesn't get called.
So I though that Twitter's code was calling event.stopPropagation() or similar so I tried to remove event listeners on one of them by calling $(button).off() but it didn't work either.
$('.dropdown-toggle').on('click', function() {
console.log('Hi !');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am not an expert in javaScrit , but i have the following concern. I have the following Script :-
<script type="text/javascript">
$(document).ready(function () {
$("#DCSort").click(function () {
what this indicates is the following :-
1. the script will run when the document finishes loading.
2. when the DCSort DOM element is clicked .
my question is as follow:-
let say that after the document loaded , a new element with DCsort have replaced the old DCSort element , will the original javaScrip fire when the newly added DCSort element has been added using an Ajax call and i use click on it ?
Thanks
Replace this -
$("#DCSort").click(function () {
with this -
$("body")on('click', '#DCSort', function () {
This uses event delegation to account for items added to the DOM after it is originally rendered.
You need event delegation in that case:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).on('click','#DCSort',function () {
This question already has answers here:
javascript or jQuery doesn't work in dynamically generated content
(4 answers)
Closed 9 years ago.
I have a Jquery script which should be fired when a file input changes. It works in a static page, but when content is generated it doesn't respond. Where is my problem?
$("#file_input").on("change", function(){
Code To Execute
});
You need to use event delegation:
$(document).on("change", "#file_input", function() {
Reason being -- these events are bound at run time. If your content isn't there at time, there's nothing to bind to! document in the above example is whatever the container is that has your appended content and also existed at run time.