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
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 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>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
After appending a div onclick is not working. Please help me.
jQuery(document).ready(function() {
jQuery(".chack").click(function(){
jQuery( "#pc_form" ).append('<br><div class="apply">apply</div>');
});
jQuery(".apply").click(function(){
alert();
});
});
<div class="pc_form" id="pc_form">
<div class="apply">apply here</div>
</div>
<br /><br />
<div class="chack">click</div>
$('#pc_form').live("click", ".apply", function() { alert(); });
live event workig
You need to use event delegation to attach events to dynamically added elements:
jQuery("body").on('click','.apply',function(){
alert('tst');
});
The div.apply is added with jquery, you have to bind the event to it.Try with -
jQuery( "#pc_form" ).append('<br><div class="apply">apply</div>').bind('click', function(e) {
e.stopPropagation();
alert('hello');
})
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 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!');
});