You need to change
$("#menu_1").on("click", function(){
alert(this.id);
})
with :
$("#content").on("click", "#menu_1", function(){
alert(this.id);
})
Working FIDDLE
You need to use event delegation for dynamically generated elements
You can use attribute starts with selector for all dynamically generated menu_
$("#content").on("click", "[id^='menu_']", function(){
alert(this.id);
})
You're using jQuery, so do it the easy way, add the event handler when you create the element, that way you don't have to worry about the incrementing ID in the selector either when you create more than one element
var inc = 1;
function addMenuItem(){
$('<span />', {
id : 'menu_' + inc,
html : '#menu_' + (inc++) + ' |',
on : {
click : function() {
alert(this.id);
}
}
}).appendTo('#content');
}
$("#addMenuItem").click(function(){
addMenuItem();
});
Put your onclick for the menu inside the addMenuItem() function.
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
$("#menu_1").on("click", function(){
alert(this.id);})}
Remember you are selecting by Id. If you were selecting by class then putting the on click handler outside the method will work.
You need to use the .on with event delegation
Syntax
$(parent-selector).on(event,target-selector,callback);
Note: The parent-selector must be parent element which is present in the DOM while binding the event, generally people use document
and body
, but for the performance you must have the nearest parent possible to the target
Example
$(document).on("click",".button",function(){
alert("Button Clicked");
});
var inc = 1;
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
$("#menu_1").on("click", function(){
alert(this.id);
})
}
$("#addMenuItem").click(function(){
addMenuItem();
})
You are attempting to add an event to a element which does not yet exist.
Try this:
it will work for all dynamic span with id like menu_*:
var inc = 1;
function addMenuItem(){
var span = document.createElement("span");
span.setAttribute("id", "menu_" + inc);
span.innerHTML = " #menu_" + inc++ + " |";
var content = document.getElementById("content");
content.appendChild(span);
}
$("#addMenuItem").click(function(){
addMenuItem();
})
$(document).on("click", "[id^='menu_']", function(){
alert(this.id);
})
I have a table and in one td I have an another table. What I am trying to do is select only the last tr from the first table (which is represented in the example below). My table HTML: <table&...
I have a table and in one td I have an another table. What I am trying to do is select only the last tr from the first table (which is represented in the example below). My table HTML: <table&...
I have 2 jstrees and now I am trying to implement a drag and drop option between them, but I can't seem to manage to obtain the id's of the element i am dragging or the new parent's id (after drag and ...
I have 2 jstrees and now I am trying to implement a drag and drop option between them, but I can't seem to manage to obtain the id's of the element i am dragging or the new parent's id (after drag and ...
Here is my code so far: dojoConfig = {parseOnLoad: true}; resetStopwatch(); require(["dojo/query", "dijit/form/ToggleButton", "dijit/form/Button", "dojo/dom", "dojo/dom-attr", "dojo/...
Here is my code so far: dojoConfig = {parseOnLoad: true}; resetStopwatch(); require(["dojo/query", "dijit/form/ToggleButton", "dijit/form/Button", "dojo/dom", "dojo/dom-attr", "dojo/...
This is not something I'm actually going to use, I know I should not have two headers on a page, this is just an example of my problem. This works perfectly when there is only one on the page, but ...
This is not something I'm actually going to use, I know I should not have two headers on a page, this is just an example of my problem. This works perfectly when there is only one on the page, but ...