select dynamically created elements using jquery

Question

I'm trying to have dynamically generated elements call functions, or be selected by jquery to do another action. Not having much luck so far.

html

<button id="staticButton">static button</button>
<button id="onClickButton" onclick="onClickFunction()">onClick button</button>

<div id="from-static"><h3>buttons created using static button</h3></div>
<div id="from-dynamic"><h3>buttons created using dynamic buttons</h3></div>

js

element_number = 1;

$('#staticButton').on('click', function(){
    $('#from-static').append(
        '<button id=' + element_number + ' >' + 'Dynamic Button #' + element_number + ' generated by static button</button> <br/>'
    );
    element_number = element_number + 1;
});

how would I select the newly generated buttons?

$('?').on('click', function(){
    var currentId = $(this).attr('id'); 
    $('#from-dynamic').append(
        '<button id=' + element_number + ' >' + 'Dynamic Button #' + element_number + ' generated by Button #: ' + currentId + '</button> <br/>'
    );
    element_number = element_number + 1;
});

another approach perhaps: add an onclick event to generated buttons that call a function

function onClickFunction(){
    alert("should this work?");  
}

but clicking on the button I get: ReferenceError: onClickFunction is not defined

http://jsfiddle.net/waspinator/5RgWh/

delegate event... https://learn.jquery.com/events/event-delegation/ — A. Wolff, Apr 17 '14 at 15:05
Did you [search?](https://www.google.com/search?q=attach+events+to+dynamic+element+site:+stackoverflow.com) - There are quite literally **pages** on this. — George, Apr 17 '14 at 15:06
@waspinator Too late to delete. BTW, not really fair play now you have your answer... — A. Wolff, Apr 17 '14 at 15:11

AbstractChaos · Accepted Answer · 2014-04-17T15:17:40.120

Delegate the click event using .on()

element_number = 1;

$('#button0').on('click', function(){
    $('#from-static').append(
        '<button id=' + element_number + ' class="btn" >' + 'Element #' + element_number + '</button> <br/>'
    );
    element_number = element_number + 1;
});

// function to handle dynamically generated buttons
$(document).on('click','.btn', function(){
    var currentId = $(this).attr('id'); 
    $('#from-dynamic').append(
        '<button id=' + element_number + ' >' + 'Element #' + element_number + ' Generated by: ' + currentId + '</button> <br/>'
    );
    element_number = element_number + 1;
});

http://jsfiddle.net/5RgWh/1/

score 2 · Answer 2 · answered Apr 17 '14 at 15:10

2

Change this line

$('?').on('click', function(){

To:

$('#from-static').on('click','button', function(){

answered Apr 17 '14 at 15:10

Think Different

2,815
1
12
18

score 0 · Answer 3 · answered Apr 17 '14 at 15:07

0

You can't have an id element that contains only a number:

http://www.w3.org/TR/html401/types.html#type-name

answered Apr 17 '14 at 15:07

Alex W

37,233
13
109
109

3

That's valid in HTML5 even still not supported in CSS using ID selector – A. Wolff Apr 17 '14 at 15:08
@A.Wolff A large chunk of internet traffic does not support HTML5. It also hasn't officially been released. – Alex W Apr 17 '14 at 15:15
But the spec regarding this behaviour is fixed and CSS4 will support it too. That's said, you are correct. EDIT: but anyway this doesn't answer OP's issue here – A. Wolff Apr 17 '14 at 15:19
It actually does answer the question. He is not following the specifications, so he is going to have undefined behaviour. Therefore, my answer to his problem is to first fix his code to follow the specifications. – Alex W Apr 17 '14 at 15:24

select dynamically created elements using jquery

3 Answers3