如何在渲染的新元素上调用 slideDown()

Question

我有一个无序列表，其中的li元素是根据后端数组中的项目数呈现的。

当新项目添加到数组中时，将呈现相应的 li 元素并在我的列表中弹出。是否可以为每个新的 li 元素提供一个 slideDown(( 动画？

Answer 1

是的，但你需要使用 .on(( 或 .live((，具体取决于你使用的 JQuery 版本。

http://api.jquery.com/on/

http://api.jquery.com/live/

好的，所以尝试将其包装在一个函数中

function doSlideDown(){
    $('ul > li > input[type="checkbox"]').on("click", function() {        
    var parent = $(this).parent("li");
    if($(this).is(":checked") === true) {
    // move to the top
    $(parent).slideUp(300, function() {
      $(parent).prependTo($(parent).parent());
      $(parent).slideDown(300);
    });
    } else {
      $(parent).slideUp(300, function() {
        $(parent).appendTo($(parent).parent());
        $(parent).slideDown(300);
      });
    }
});
}

然后将其添加到文档就绪功能之外

$(document).ajaxComplete(function() {
    doSlideDown();
});

这将在每次运行一些 ajax 并附加一个新项目时更新 DOM。