如何觸發動態生成列表的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>

我現在很無能，怎麼做這個工作。

來源

2017-01-16 Sunil Singh

你可以使用委託的事件，但在你的情況下，它似乎很明顯，當點擊時，你可以只更換每個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>

來源

2017-01-16 19:19:44

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

使用。您可以使用其他不是動態創建的元素來代替$（「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); 
});

來源

2017-01-16 19:23:54 psdev

最好將偵聽器添加到最近的非生成元素。在這種情況下，我建議你使用'$（'＃videowrapper'）'而不是'$（'body'）'。 – Emmanuel

是的，你是對的。我只是不確定他的代碼的哪部分是'未生成的'。 – psdev

如何觸發動態生成列表的jquery點擊事件

回答

相關問題