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.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am injecting some html strings to create buttons, however they jquery events don't fire after they have been created. I was told they needed to be "initialized" but cannot find an example.
$('#parent_div).html(<div class="clickable-button">click me here</div>);
will create:
<div id='parent_div'>
<div class="clickable-button">click me here</div>
</div>
And my usual jquery doesn't fire when clicked.
$('.clickable-button').on('click', function (){
console.log('clicked');
}
I got it to work by using a parent that existed before the injection with on()
$('#parent_div').on('click', '.clickable-button', function(){
console.log('clicked');
}
But it seems like there should be a better way to handle this because I don't always know what the parent is and I don't want to hard code new jquery every time I inject something. How do people usually handle this problem?
You can listen at the document level in that case you dont know whats the parent element
$(document.body).on('click', '.clickable-button', function(){
console.log('clicked');
}
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:
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.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I am using the code below to load html into my page:
$(document).ready(function () {
$('#loadingArea').load('includes/template1.html');
});
It works great but for some reason when I use any query to target any divs belonging to the loaded html file it won't work for example:
template1.html contains:
Button Inside the Template
If I try to use:
$("#mybutton").click(function(){
alert('Something');
});
It will not work.
How can I fix this?
You need to delegate the events. Delegate the event by attaching to the nearest static object:
$("#loadingArea").on("click", "#mybutton", function(){
alert('Something');
});
learn about event delegation see:
$("body").on('click','#mybutton',function(){
alert('Something');
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
We have an external js file loaded on our static html page with a jQueryUI dialog opening a url with jQuery.load() from a button click. Inside the ajax content returned is a handful of input elements, all number type. We need to bind the keydown and change events to the number inputs, however it's not binding since the .bind() is happening before the elements are in the DOM from the ajax result. We know about .on() but having an awfully hard time wiring it up. I know we're missing something simple; any suggestions?
Basic Fiddle recreation: http://jsfiddle.net/jbwebtech/wvufLket/
There's nothing too hard to grasp that it's not already explained pretty decently inside the jQuery .on() documentation: http://api.jquery.com/on/#direct-and-delegated-events
http://learn.jquery.com/events/event-delegation/
$(staticElementParent).on("event1 event2", dynamicElement, function(){ /*stuff*/ });
In your specific case:
fiddle demo
var ajax_content = '<input type="number"><br><input type="number"><br><input type="number"><br><input type="number">';
$(function () {
console.log('jquery ready');
$("body").on('input', 'input[type=number]', function (event) {
console.log('on() input successful');
});
// "AJAX" ;)
$('button').click(function(){
$('#ajax_container').html(ajax_content);
})
});
As always, read the Docs
Can't you just put your bind the callback of the .load() function? Or if you can't(im not sure), you can change a variable in the callback and check if it's loaded in the bind.
Or you can put the bind in the file that loaded with jquery(at the end of it).
Sorry, i can't comment yet.