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

时间:2017-05-30 06:57:04

标签: javascript

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

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

<li>中创建<ul>的方法JavaScript:

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

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

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

如果你有一些解决方案:)

感谢&#39; S

5 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

确保您注册的点击事件后有元素(即在追加后):

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

答案 2 :(得分:0)

创建一个功能,并在点击现有 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
}

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

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

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