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

Question

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

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

到目前为止，我设置它的方式是用户点击标题 block 开始，它设置了一次性点击功能，为我提供 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))
})