Check if an automatically created div has been clicked

Question

I have a JSON file with a list of elements. For each element in this list a container gets created. This is the code:

$.getJSON('/data/risks.json', function(data) {
var html = '';

$.each(data.risk, function(key, value){
    html += '<div class="elementlist">';
    html += '<br><p><b>'+value.name+'</b><br><br>'+value.description+'</p>';
    html += '</div>';
});
$('#list').html(html);
});

Now I need to know which container was clicked by the user. This:

$('.elementlist').click(function(){
var chosenRisk = $(this).text(); 
    console.log(chosenRisk);
});

works for the container that is already on the page but is for the ones that are created based on the JSON file. What would be the best way to do this?

Greetings

score 2 · Answer 1 · answered Dec 01 '17 at 12:42

2

Delegate the event.

$(document).on('click', '.elementlist', function(){
    var chosenRisk = $(this).text(); 
    console.log(chosenRisk);
});

I would also recommend changing document to '#list' for slightly better performance.

answered Dec 01 '17 at 12:42

Adam Azad

10,675
5
25
63

score 1 · Answer 2 · edited Dec 01 '17 at 12:44

1

You need to delegate the handling of the event

$('#list').on( "click", ".elementlist", function(){
    var chosenRisk = $(this).text(); 
    console.log(chosenRisk);
});

edited Dec 01 '17 at 12:44

Adam Azad

10,675
5
25
63

answered Dec 01 '17 at 12:43

gurvinder372

61,170
7
61
75

1

@AdamAzad thanks for correcting the syntax error. – gurvinder372 Dec 01 '17 at 12:45

Check if an automatically created div has been clicked

2 Answers2