jquery - Event Listener for Dynamically Created Elements

Question

How do I give a dynamically created element an event listener? In the example below, AFTER all this code execute the variable term_num increments up by one (term_num++) so every time the #abtn click event is called, a new div element "term_[term_num]" is created. How do I give each of these new divs a click event listener?

$( document ).ready(function() {
$( "#abtn" ).click(function( event ) {
        var newterm = '<div id='term_'+term_num+''>'+term+' </div>';
        var term = document.getElementById("term_input").value;
        $('#terms').after(newterm);

Answer 1

You can just register it in advance with .on(): Live demo (click).

$(document).on('click', 'some-selector', function() {

});

or create the dom element newTerm before appending it and attach the function directly: Live demo (click).

var $newTerm = $(newTerm);

$newTerm.click(function() {

});

Since the selector you're adding to the element is a dynamic id, I'd recommend going with the second approach here. If you want to add a class to the generated elements so that you can delegate .on to them, use .on. It's more efficient.