Javascript 在动态添加的DOM元素上使用单击事件

问题：当元素硬编码到HTML中时，它为什么工作，而当通过Jquery动态添加时，它不工作

我在自学javascript的过程中教我自己的Jquery，为了学习，我只是创建了一个简单的疑难解答助手应用程序。 实际上，我的代码发布在这里：

到目前为止，我的设置方式是用户单击标题块开始，该标题块使用一次性单击功能设置，以便为我的工作中提供it服务的某些产品创建UL

然后，我尝试单击该列表中的每个产品，以获取该特定产品的疑难解答演练（它将根据用户单击或输入的内容指导用户）

出于测试目的，我刚刚尝试将列表项的背景设置为红色

我无法让它工作，或者我的console.log启动，告诉我函数没有被调用

但是，如果我将ul中的硬代码硬编码到html中，使用相同的代码来处理click事件，它就可以正常工作

我做错什么了吗

只是想获得更好的理解

$(function () {
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//set up variables
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//var $liItems = $('.product li');
var $chief = $(".chiefblock");
var $container = $("#container");
var $this = $(this);
var $error = '';



var initList = function () {
  console.log("initList initiated");

        $container.append('<div class="product"><ul><li>TASC</li><li>TABE</li><li>Las Links</li><li>TerraNova</li><li>E-Direct</li></ul></div>'); 
    $("p").text("Start by selecting a product");

}


var navItems = function (event){
      console.log("navItems initiated");
      var target = $(event.target);
          if (target.is("li") ) {
            target.css("background-color", "red" );
          }



}       
var nObject = function () {
        $container.append('<div id = "tasc"><h2>Tasc</h2><p></p></div></div>');
    $('#newItem').prepend('<h2>Item</h2>');




}


$('.chiefblock').one('click', initList)
    //$('li').on('click', navItems) this i tried and does not work
$('#newObject').on('click', nObject)
$('ul').on('click', navItems)
//$liItems.on('click', navItems)this i tried and does not work


});

$（函数（）{
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//设置变量
//*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_
//var$liItems=$（'.product li'）；
变量$chief=$（“.chiefblock”）；
var$container=$（“#container”）；
var$this=$（this）；
var$error=''；
var initList=函数（）{
console.log（“初始化列表”）；
$container.append（“
TASC
TABE
Las Links
TerraNova
E-Direct
”）；
$（“p”）.text（“从选择产品开始”）；
}
var navItems=函数（事件）{
console.log（“navItems已启动”）；
var target=$（event.target）；
如果（目标公司为（“li”））{
css（“背景色”、“红色”）；
}
}       
var nObject=函数（）{
$container.append（'Tasc
'）；
$（'#newItem'）。前置（'Item'）；
}
$（'.chiefblock'）.one（'click'，initList）
//$（'li'）。在（'click'，navItems）上，我尝试了此操作，但无效
$（'#newObject'）。在（'click'，nObject）上
$（'ul'）。在（'click'，navItems）上
//$liItems。在（'click'，navItems）上，我尝试了此选项，但无效
});

对于动态添加的DOM元素，请使用

$(document).on('click', '#element', function() {
    console.log($(this))
})

---

$（函数（）{…相当于onReady或onLoad，它只在页面加载开始时启动，并查找当时可用的项目。由于您添加的项目当时不存在，因此您的事件不会为您的新项目启动。链接@Mohamed Yousef shared总结了这一点。您基本上需要收听

文档中的事件动态添加元素。
$（文档）。在（'click'，'#identifier'，function（）{}）；
例如=）可能重复感谢jcruz和psycho mantis的具体解释。如果我有$（文档），我现在可以启动我的函数了设置为特定的div，但仍然无法在单击单个列表项时启动它，有什么建议吗？（我查看了发布的链接，无法解决我的问题）