Jquery on click event not working

Question

I cant find why my code isn't working. When I click on the generated element the alert is not firing.

Here is a fiddle : http://jsfiddle.net/pZAdP/

And the code

<button id="addMenuItem">Add Menu Item</button>
<div id="content"></div>

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();
})

$("#menu_1").on("click", function(){
    alert(this.id);
})

Answer 1

You need to change

$("#menu_1").on("click", function(){
    alert(this.id);
})

with :

$("#content").on("click", "#menu_1", function(){
    alert(this.id);
})

Working FIDDLE

Answer 2

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);
})

Fiddle DEMO

Answer 3

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();
});

FIDDLE

Answer 4

http://jsfiddle.net/pZAdP/4/

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.

Answer 5

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");
});

Answer 6

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.

Answer 7

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);
})

Answer 8

the element is not on the page when you select it, do select generated elements:

$(document).on("click","#menu_1", function(){
    alert(this.id);
})