JQuery：動的に作成された要素にイベントハンドラ（アニメーション）を追加する

Question

作成中に同時にアニメーション化するためには、順序付けられていないリスト内の動的に作成されたリスト項目を取得する必要があります。

は

私のjQueryコードの設定：

$("button#enterAction").click(function(){ 
    var userAction = $('input#action').val(); 
$("ul.list-group").append('<li class="list-group-item" id="added-list-item">'+userAction+'</li>'); 
}); 

は今、このコードは、上記のそれにアニメーションなしのリスト項目を作成します。アニメーションを追加するには（.toggleまたは.animate）このリスト項目のみに、順序付けされていないリスト全体に影響を与えないでください。

ID added-list-itemの動的に作成された要素で2番目のイベントを発生させることで実現できたと思っていましたが、正しく書き込む方法（構文と関数の使用方法）がわかりません。助けてください。

Answer 1

あなたは隠された要素を追加し、それをフェードアウトすることができます

$("ul.list-group").append('<li class="list-group-item" style="display:none">'+userAction+'</li>').children(':last').fadeIn(); 

の作業例：

$(function() { 
 
    $("button#enterAction").click(function(){ 
 
     var userAction = $('input#action').val(); 
 
     $("ul.list-group").append('<li class="list-group-item" style="display:none">'+userAction+'</li>').children(':last').fadeIn(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="action"> 
 
<button id="enterAction">Add</button> 
 

 
<ul class="list-group"></ul>

Answer 2

結合事象の直接および委任の2つの方法があります。既存の要素にのみ適用するダイレクトメソッドを使用しています。イベントリスナーを動的要素で動作させるには、2番目の方法を使用する必要があります。

直接法：$(selector).click(callback); 委任方法：$(selector).on('click', callback);

委任方法はあなたのために動作します。

Answer 3

あなたは新しい作成アイテムにクリックをバインドできます。 ここでどのようにアニメーションの例

$("button#enterAction").click(function(){ 
 
    var userAction = $('input#action').val(); 
 
    var li = $('<li class="list-group-item" id="added-list-item">'+userAction+'</li>'); // create li 
 
    li.bind("click", function(){ 
 
    /// code goes here 
 
    
 
    }) 
 
    $("ul.list-group").append(li); 
 
});