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

Question

问题：为什么当元素被硬编码到HTML，但通过jQuery动态添加时不起作用工作？

我教我的自我jQuery的我的JavaScript的自学之内，我只是创造学习的缘故一个简单的故障排除助理应用程序。其实我已经张贴在这里我的代码：https://repl.it/@jllrk1/OrganicBothRay。

我有它成立至今的方式是头块开始，这是设置了一个一次性点击函数来创建一个UL的一些产品在我的工作中，我们提供IT服务的用户点击。

然后我想可以点击每个产品在该列表中拉故障排除演练针对特定产品（它会引导基于他们点击或输入用户）。

出于测试目的，我只是试图具有在被点击变为红色列表项的背景。

我不能得到这个工作，还是我的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))
})