動的に生成されたリストの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

あなたがイベントを委任使用することができますが、あなたの場合には、それは、代わりに、リスト全体 – 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

おかげでリチャードを置き換えるので、その作業をクリックしたときにだけ、各LI内のコンテンツを置き換えることができることは明白思える... :) –

利用方法 "オン"。 $（ "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

リスナを最も近い非生成要素に追加することが望ましいです。この場合、 '$（ 'body'）'の代わりに '$（ '＃videowrapper'）'を使うことをお勧めします。 – Emmanuel

はい、あなたは正しいです。私は彼のコードのどの部分が「非生成」であるか分からなかった。 – psdev

動的に生成されたリストのjqueryクリックイベントをトリガーする方法

答えて

関連する問題