Question

问题：为什么将元素硬编码到HTML中却不能通过Jquery动态添加元素时起作用？

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

到目前为止，我的设置方法是用户单击标题框开始，该标题框具有一次性单击功能，可以为我提供IT服务的某些产品创建UL。 / p>

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

出于测试目的，我只是尝试使单击列表项的背景变为红色。

我无法执行此操作，或者无法启动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


});

Answer 1

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

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

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

1 个答案: