JavaScript 如何创建<li> <ul> 并单击<li>

Question

我想在现有<ul>中创建<li>。我成功地做到了。但是我想在创建的<li>上使OnClick((函数。但是，当我想调用我的JavaScript方法时，什么都不会发生。

我认为加载浏览器页面和<li>创建时<li>不存在。浏览器找不到创建的<li>。

方法JavaScript在<ul>中创建<li>：

 $('#myList').click(function () {
 $("#firstYear ul").append('<li><a href="">' + valueArray + '</a></li>');
     });

在<li>上进行的方法，但什么也没有发生：

 $('#firstYear ul li').click(function () {
    console.log('Ok');
         });

如果您有一些解决方案：(

谢谢的

Answer 1

我会亲自使用委托方法jQuery提供仅写下一次方法，然后重复使用

$(document).ready(function() {
  $('#list').delegate('li','click', react);
  $('#list').append('<li>hello</li>');
  $('#list').append('<li>hi</li>');
})

function react() {
  alert($(this).text());
}

这是有效的示例https://codepen.io/kejt/pen/ewwrbg

Answer 2

您可以使用.on()方法：

$('body').on('click', '#firstYear ul li', function() {
   console.log('Ok');
});

这也适用于动态添加的元素。

Answer 3

确保您注册的点击事件您有元素(即附加后(：

 $('#myList').click(function () {
    $("#firstYear ul").append('<li><a href="">' + valueArray + '</a></li>');
    $('#firstYear ul li').click(function () {
        console.log('Ok');
    });
 });

Answer 4

在单击现有 li和新添加 li

时，创建功能并调用该功能

function logResult () {
  console.log("ok");
}

添加您的 li

中的onclick方法

$("#firstYear ul").append('<li><a href="" onClick="logResult()">' + valueArray + '</a></li>');
 });

在您的点击功能中也致电logResult

 $('#firstYear ul li').click(function () {
   logResult()
 });

Answer 5

这正在发生，因为您的页面已加载到浏览器中后会生成列表，因此，单击事件无法找到动态创建的元素。

您要做的是，您在浏览器内的document对象上有触发单击事件。例如，

$(document).on('click', '#firstYear ul li', function() {
  console.log('Ok');
});

您也可以参考此信息，以获取更多信息事件绑定在动态创建元素上