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

问题描述：

嗨我想用新的列表动态地使用jquery替换已经创建的列表。但在新创建的列表中，我无法使用任何jquery事件。如何触发动态生成列表的jquery点击事件

我创建的玩家

列表萨钦
Sourav
拉胡尔

在点击它提醒其ID的列表名称，然后新创建的列表被替换动态使用jquery。

科利
MS
Rahane

但我不能挑点击事件为新创建的列表。它没有在控制台中显示任何错误，当我们点击任何新动态列表的名称时没有发生任何事情。

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

我现在很无能，怎么做这个工作。

你可以使用委托的事件，但在你的情况下，它似乎很明显，当点击时，你可以只更换每个L1里面的内容，而不是替换整个列表 – adeneo

答

既然你提到动态创建的元素，你需要使用事件代表团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>

感谢理查德，它的工作... :) –

答

使用。您可以使用其他不是动态创建的元素来代替$（“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); 
});

最好将侦听器添加到最近的非生成元素。在这种情况下，我建议你使用'$（'＃videowrapper'）'而不是'$（'body'）'。 – Emmanuel

是的，你是对的。我只是不确定他的代码的哪部分是'未生成的'。 – psdev

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

相关推荐