javascript - 如何触发jquery点击事件动态生成列表

标签 javascript jquery dynamic

嗨,我正在尝试使用 jquery 动态地用新列表替换已经创建的列表。但在新创建的列表中,我无法使用任何 jquery 事件。

我创建了一个玩家列表

  • 萨钦
  • 苏拉夫
  • 拉胡尔

单击任何列表名称时,它都会提醒其 id,然后使用 jquery 动态替换新创建的列表。

  • 科利
  • 女士
  • 拉哈尼

但我无法为新创建的列表选择点击事件。当我们单击新动态列表的任何名称时,它没有在控制台中显示任何错误,并且没有任何反应。

<html>
<head>

<script src="jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
    $("#videoul li").click(function(){
         var vocab_id = $(this).attr('id');
         alert("Hi the ID is " + vocab_id);

         var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>';

         $('#videowrapper').html(aaila);
    });
});
</script>
</head>
<body>

<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a>
    <ul id="videoul">
        <li id="Tendulkar">Sachin</li>
        <li id="Ganguly">Sourav</li>
        <li id="Dravid">Rahul</li>
    </ul>
</div>


</body>
</html>

我现在一无所知,如何让它发挥作用。

最佳答案

使用“on”方法。您可以使用非动态创建的其他元素来代替 $("body") 选择器。

$('body').on('click', '#videoul li', function() {
    var vocab_id = $(this).attr('id');
    alert("Hi the ID is " + vocab_id);

    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>';

    $('#videowrapper').html(aaila);
});

关于javascript - 如何触发jquery点击事件动态生成列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41683547/

相关文章:

javascript - MEAN/AngularJS 应用程序检查对象是否已发布

javascript - 如果我将 .on ('click' 事件附加到 $ ("body",性能会受到影响吗?

javascript - 使用 jQuery 加载图像并将其附加到 DOM

c++ - C++ 中的动态数组(指针数组还是新数组?)

android - 动态添加时不显示自定义 View

javascript - 选择 TypeError ui.item 未定义 Jquery 自动完成

javascript - 在保留 $== jQuery 的同时混合 jQuery 和 Prototype

javascript - 如何在for循环中创建表行

javascript - 如何使用以前的跨度顶部和左侧位置来放置其他跨度,以免它们相互重叠?

c - 指向结构体的指针的二维数组(动态)