This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 10 months ago.
I have problem with following code. I have a div with id reloadDiv that is refreshing every 3 seconds using ajax. Content of the div is loaded using php, there is more content in this div but I didn't added it here.
Div is reloading normally. The problem is with input type button event with class replyComment, there are multiple buttons with this class here. When I add click event the event is working until first reload, as soon as div reloads event is not working any more.
Does someone know how to solve this problem?
<div id="reloadDiv">
<?php foreach($comments as $c):?>
<input type="button" value="Reply" class="replyComment" />
<?php endforeach?>
</div>
js:
setInterval(function(){
$("#reloadDiv").load(location.href + " #replyComment");
}, 3000);
$('.replyComment').click(function(){
console.log("smth")
});
That happens because content is replaced, and the element with the event doesn't exists anymore, as well the event.
Try this:
$('#reloadDiv').on('click', '.replyComment', function() {
With that, the event is bound to the parent element and will work no matter how many times the content is recreated.
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I have a link on my page, that if clicked, will generate a popup via Ajax. (The popup code is not under my control)
Now i want to Add functionality, via my code jQuery, on a link of this popup.
This popup is not printed in source code after page is loaded. Obviously the jQuery can't find this link.
How can i do, to add a click() trigger functionality on this link in this ajax popup?
If I properly understood the problem, your click event is not fired because the target is loaded after the event is attached. To fix it, you can un the `[on]'(http://api.jquery.com/on/) method.
$("#myModal").on( "click", "a#myLink", function() {
console.log( "click fired");
});
$("#modalContainer").on( "click", "#myTargetElement", function()
{
console.log("click fired");
});
$('#btn').click(function()
{
$('#modalContainer').html("<div id='myTargetElement'>ajax loaded content</div>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalContainer">initial content</div>
<button id=btn>fake ajax load</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:
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:
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.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I am adding dynamic content to a php page using jQuery. I don't have a problem adding the content I just can't seem to find a way to make the new content respond to a click event.
For example (I'm using a div here but could be a button or other type).
$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');
Edit:
I am currently using jquery 1.9.1, I was using 1.6.2 but I am checking out magnific-popup which required a newer jquery version.
I didn't post my failed attempts (
$("#newstuff").click(function() {...
$("#newstuff").live('click', function() {...
binding the click event, etc.
because I assumed that I am missing something fundamental that a more seasoned jQuery user would spot without the noise of broken code.
You can attach a click event before inserting the element into the DOM:
$('<div id="newstuff">...</div>').click(function(){
//do something
}).insertAfter('#oldstuff');
can't seem to find a way to make the new content respond to a click event.
You have to do event delegation
$("#oldstuff").on("click", '#newstuff',function(){
alert( $(this).text() );
});
What you need is to attach the event to the parent element.
HTML:
<div id="parent">
<div class="thediv">Hello</div>
</div>
JavaScript:
function addDiv() {
var div = document.createElement('div');
div.className = 'thediv';
document.getElementById('parent').appendChild(div);
}
$('#parent').on('click', '.thediv', function() {
// ...
});
See if this technique works.
It is probably you are binding event before attaching DOM and also in latest version of jquery library live method is deprecated so try to bind click even after attaching DOM or you can use following code...
first add DOM.
$("#oldstuff").after('<div id="newstuff">Some content that should respond to click event</div>');
and then bind event.
$('#newstuff').on('click',function(){alert('do your stuff!')});
Or
$('#newstuff').click(function(){alert('do your stuff!')});
Try this
$("#yourElementId").live("click",function(){
alert( $(this).text() );
});
As .click is not working after loading dom or dynamically created element