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!');
});
Related
I'm trying to find a way to create 'on click' events for dynamically generated buttons in JS. I know that in jQuery it can be done like this:
$(document).on('click', 'name=[buttonName]', function() {});
I know the e.target method in JS, but I'm wanting to find a way to do it with a name attribute instead.
Thanks
Firstly that line of jQuery isn't quite right as the square brackets are in the wrong place:
$(document).on('click', '[name="buttonName"]', func);
To achieve the same in plain JS you would need to attach a click event handler to a static parent element, then check the name property of the clicked element:
document.addEventListener('click', function(e) {
if (e.target.name == 'buttonName') {
// do something...
}
});
document.addEventListener('click', function(e) {
if (e.target.name == 'buttonName') {
alert('Hello!');
}
});
<button>I do nothing!</button>
<button name="buttonName">I say hello!</button>
You can use querySelector in a similar way than you would in jQuery, and attach the event listener whenever a new element is added to the DOM.
document.querySelector("button[name='buttonName']").addEventListener("click", function(){
alert("Hello, World");
});
<button name="buttonName">Click me</button>
The difference to the original jQuery code is that in that example it listens to events on the document whereas this does not.
You can use getElementByName to add click event to your button which is dynamically render
document.getElementByName("ButtonName").addEventListener("click", function(e) {
});
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:
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:
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:
Closed 11 years ago.
Possible Duplicate:
How can I stop an onclick event from firing for parent element when child is clicked?
I have a div with an onClick event but I don't want it to run when I click a link inside the div.
How can I stop the onClick effecting links inside the element?
<div onclick="dosomething();">
go somewhere but don't dosomething();
</div>
If you could use jQuery then,
$(document).ready(function() {
$("#yourDivId a").click(function(e) {
e.preventDefault();
});
});
//OR without jQuery
document.getElementById("yourAnchorId").onclick = function(evt) {
evt.stopPropagation();
//for IE window.event.cancelBubble = true
}
Hope it helps
$("div#some_id_or_class a").click(function(e) { e.stopPropagation(); })
Don't know how without jQuery. You would have to look for how to stop the propagation of the event in javascript.