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的動態創建元素上發射第二個事件來實現，但我不確定如何正確寫下它（使用的語法和函數）。請幫忙。

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

有約束力的事件直接和委託兩種方式。您正在使用僅適用於現有元素的直接方法。要讓事件偵聽器在動態元素上工作，您需要使用第二種方法。

直接法：$(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); 
 
});