Question

我想在现有<li>中创建<ul>。我成功了。但是我想在创建的<li>上创建onclick（）函数。但是当我想调用我的JavaScript方法时没有任何反应。

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

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

＆＃13;

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

＆＃13;

方法OnClick on <li>谁创建但没有任何反应：

＆＃13;

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

＆＃13;

如果你有一些解决方案：）

感谢＆＃39; S

Answer 1

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

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

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

Answer 2

确保您注册的点击事件在后有元素（即在追加后）：

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

Answer 3

创建一个功能，并在点击现有 li和新添加 function logResult () { console.log("ok"); }

时调用该功能

li

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

中添加onClick方法

logResult

在点击功能中，也可以拨打$('#firstYear ul li').click(function () { logResult() });

temp = {
    value: 42
}

Answer 4

我个人会使用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 5

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

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

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

您还可以参考此内容获取更多信息Event binding on dynamic created element

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

5 个答案: