This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following javascript code:
$(function (){
$('a.folder').click(function() {
// code goes here ...
}
});
And the following html code:
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
Whenever I click on the link, the javascript code is never reached. I must say that this html code is generated dynamically after the page loaded. Is this the reason? Any workaround?
when you attach the click handler it's possible that your anchor doesn't exist, try using this:
$(function (){
$(document.body).on('click', 'a.folder', function() {
// code goes here ...
});
});
using this event delegation the click event will fire even if your anchor created dynamically after this code.
$(document).ready(function() {
$("body").on("click", "a.folder", function(e) {
e.preventDefault();
alert('a .folder was clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="folder" href="GetFilesAndFolders?rootFolder=Exigences">Etudes de cas</a>
Related
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:
jquery .click overriding anchor href when i dont want it to!
(4 answers)
Closed 8 years ago.
When setting up a div with a class, attaching a click event to that class using jQuery, it prevents any child href from working.
For example:
HTML
<div class="someClass">
some text here
and a link
</div>
JS
$('body').on('click', '.someClass', function(e) {
alert("clicked");
});
jsfiddle for this: http://jsfiddle.net/w6ero5j5/2/
it will always alert the message, even when clicking on the link.
how can I make the link works?
I dont know why do you want this. But, it happen when you put alert function.
Then If you execute this, there is not problem. code here
$('.someClass').on('click', function(){
var $this = $(this);
if ( $this.hasClass("ok") ) {
$this.removeClass("ok");
} else {
$this.addClass("ok");
}
});
This question already has answers here:
Jquery how to bind click event on dynamically created elements?
(2 answers)
Closed 8 years ago.
JAVA SCRIPT
$(document).ready(function() {
$(".group").click(groupFile);
function groupFile(){
alert('clicked!');
}
});
function insert()
{
$("body").append("<div class='group' ></div>");
}
HTML
<div class='group' >
</div>
<input type="button" value="insertNewElement" id="insert" onclick="insert()"/>
when page loaded,on click div.group works well and fire groupFile and alert to me.
but when inserted the new div.group.onclick div.group function groupFile does not worked?
please help me
You can use jQuery on() method to delegate the events to a static ancestor as shown below:
$(document).ready(function() {
$(document).on("click",".group",groupFile);
function groupFile(){
alert('clicked!');
}
});
read more about event delegation
For dynamic elements you need to bind to event on the body:
$("body").on("click", ".group", function(e){
alert('clicked');
});
You should delegate event to BODY (or document or 'usually' better to the closest static parent element) level. Using .on(), pass selector param as it:
$('body').on('click', 'div.group', function(){
//...
});
See explanation
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code
// jquery for the click event
$(".back_to_followers").on('click', function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
and the link brought by AJAX
<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
Use this:
$(document).on('click', ".back_to_followers", function(event){
event.preventDefault();
alert('clicked');
$('.user_media_result').empty();
$('.user_media_result').hide();
$('.list_of_followers').show();
});
Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a simple example
<div id="test">add more text</div>
When you click on this text
jQuery('#test').on('click', function (event) {
$('body').append("<div id='newtest'>new test</div>");
});
you get some more text appear.
After I have clicked on 'add more text' my page looks like this
<div id="test">add more text</div>
<div id="newtest">new test</div>
I am wondering what I need to do to interact with the newtest div?
If I put the below in.
jQuery('#newtest').on('click', function (event) {
alert('not working?');
});
Nothing happens.
How do I interact with content that gets added after load? I thought .on helped me do this?
The reason why you need to use $(document).on() instead of $('#newtest').on() is because #newtest is a new element that you have injected into the DOM.
You must now use .on() ) against an higher element that was originally in the DOM, in order to attach an event handler to the newly injected element.
Thus:
jQuery(document).on('click', '#newtest', function (event) {
alert('This will work now');
});
You need to apply your click handler to the document.
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Hope this helps! :)
put the event on your document instead of an element
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Set the .on() event to a parent element, such as the body and delegate it to the newtest div.
jQuery('body').on('click', '#newtest', function (event) {
alert('Working!');
});