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

How is it "not working"? What does it do? What do you want it to do? Do you see any errors in your console? Have you tried to debug this yourself? — gen_Eric
– gen_Eric, Commented Jan 10, 2014 at 20:53
Its the onclick event that is not working when I click on the generated element — user3124113
– user3124113, Commented Jan 10, 2014 at 20:54
@Fred jQuery can't bind events to elements that don't exist yet. However, it does offer delegated binding, where the event is bound to an existing parent and acts like it was bound to the dynamic child(ren). — Jonathan Lonowski
– Jonathan Lonowski, Commented Jan 10, 2014 at 20:59

Merlin · Accepted Answer · 2014-01-10 21:12:22Z

4

You need to change

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

with :

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

Working FIDDLE

edited Jan 10, 2014 at 21:12

answered Jan 10, 2014 at 20:53

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

em_ Over a year ago

Well it did fix Fred's fiddle

j08691 Over a year ago

Yup. But $("#content").on("click", "#menu_1", function(){ would be preferable since #content is closer in the DOM.

Merlin Over a year ago

You're right, thanks for the comment I have updated it. Answering to quickly :)

user3124113 Over a year ago

Thank you! that's what I want !

Satpal · Accepted Answer · 2014-01-10 20:55:19Z

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

answered Jan 10, 2014 at 20:55

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

adeneo · Accepted Answer · 2014-01-10 20:56:48Z

0

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

answered Jan 10, 2014 at 20:56

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Gjohn · Accepted Answer · 2014-01-10 20:57:00Z

0

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.

answered Jan 10, 2014 at 20:57

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

Comments

Rohit Agrawal · Accepted Answer · 2014-01-10 20:57:46Z

0

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

answered Jan 10, 2014 at 20:57

Rohit Agrawal

5,5305 gold badges21 silver badges30 bronze badges

Comments

Awlad Liton · Accepted Answer · 2014-01-10 21:04:04Z

0

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

answered Jan 10, 2014 at 21:04

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

Comments

Gert B. · Accepted Answer · 2014-01-10 21:04:28Z

0

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

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

answered Jan 10, 2014 at 21:04

Gert B.

2,34720 silver badges22 bronze badges

Collectives™ on Stack Overflow

Jquery on click event not working

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related