如何触发jquery click事件以动态生成列表

Question

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

我已经创建了球员名单

萨钦
苏拉夫
拉胡尔

在单击任何列表名称时，它会警告其ID，然后使用jquery动态替换一个新创建的列表。

科利
女士
拉汉

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

<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>

我现在一无所知，如何使它工作。

Answer 1

使用“ 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);
});

Answer 2

由于您提到了动态创建的元素，因此需要将事件委托与on一起使用

查看此片段

 $("body").on("click", "#videoul li", function(){ var vocab_id = $(this).parent().attr('id'); console.log("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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

如何触发jquery click事件以动态生成列表

问题描述

2 个解决方案

解决方案1
1 2017-01-16 19:23:54

解决方案2
0 已采纳 2017-01-16 19:19:44

如何触发jquery click事件以动态生成列表

问题描述

2 个解决方案

解决方案1 1 2017-01-16 19:23:54

解决方案2 0 已采纳 2017-01-16 19:19:44

解决方案1
1 2017-01-16 19:23:54

解决方案2
0 已采纳 2017-01-16 19:19:44