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

Question

问题：为什么将元素硬编码到 HTML 中时它可以工作，但通过 Jquery 动态添加时却不工作？

我在自学 javascript 的过程中自学 Jquery，我只是为了学习而创建了一个简单的故障排除助手应用程序。 实际上，我在这里发布了我的代码：https://repl.it/@jllrk1/OrganicBothRay。

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

然后，我尝试能够单击该列表中的每个产品以提取该特定产品的故障排除演练（它将根据用户单击或输入的内容来指导用户）。

出于测试目的，我只是尝试将列表项的背景设置为单击以更改为红色。

我无法让它工作，或者我的 console.log 触发告诉我该函数没有被调用。

但是，如果我将 ul 中的代码硬编码到 html 中，对点击事件使用相同的代码，它就可以正常工作。

我做错了吗？

只是希望获得更好的理解！

$(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


});

Answer 1

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

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