单击动态添加的HTML片段时如何调用Javascript函数

Question

我试图在动态添加的HTML复选框单击时调用on（）方法。但是不会调用on（）方法。

这是我的HTML片段，它是动态添加到DOM中的。

url = link.get("href")
print (url)  

使用以下代码，单击按钮（标识为“ addItem”）后，将上述片段附加到一个分隔符（标识为“ =“ todoParent”）上

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

下面是我想单击上面HTML片段中存在的复选框时要调用的on（）方法。

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

当我尝试单击复选框（带有id =“ elementInTodoList”）调用on（）方法时，未调用on（）方法，并且未打印“ kush”。我想在选中复选框时调用on（）方法。