I am trying to call on() method on the click of a dynamically added HTML checkbox. But the on() method is not invoked.

Here is my HTML fragment which is added dynamically to the DOM.

var htmlFragment = ("<div style='width:280px;height:60px;margin: auto'>"+
    "<pre>"+
     "<input type='checkbox' id='elementInTodoList'></input><label for='elementInTodoList'> </label> <input type='text' id='elementInTodoList'></input> <button type='button'>Delete</button>"+
     "</pre>"+
    "</div>"+
    "<hr>");

The above fragment is appended to a division (with id="todoParent") on click of a button (with id ="addItem") using following code:

$("#addItem").on('click',function(){
        $("#todoParent").append($(htmlFragment));
    });

And below is the on() method which I want to call on click of checkbox present in above HTML fragment.

$("#elementInTodoList").on('click',function(){
        console.log('kush');
    });

When I try to call on() method on click of checkbox (with id="elementInTodoList"), the on() method didn't get called and "kush" is not get printed. I want to call on() method when checkbox get checked.

0 Answers