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

您可以添加隐藏元素，然后将其淡出：

schtasks /Create [/S <system> [/U <username> [/P [<password>]]]]
[/RU <username> [/RP <password>]] /SC <schedule> [/MO <modifier>] [/D <day>]
[/M <months>] [/I <idletime>] /TN <taskname> /TR <taskrun> [/ST <starttime>]
[/RI <interval>] [ {/ET <endtime> | /DU <duration>} [/K] [/XML <xmlfile>] [/V1]]
[/SD <startdate>] [/ED <enddate>] [/IT] [/Z] [/F]

工作示例：

$("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();
    });
});

Answer 2

绑定事件Direct和Delegated有两种方法。您正在使用仅适用于现有元素的直接方法。要让事件侦听器处理动态元素，您需要使用第二种方法。

直接法：<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> 委托方法：$(selector).click(callback);

委托方法适合您。

Answer 3

您可以将Click绑定到新创建的项目。这是一个例子

＆＃13;

$("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);
});

＆＃13;

JQuery：在动态创建的元素上添加事件处理程序（动画）

3 个答案: