Question

我使用以下内容将内容附加到列表中：

  $('a.ui-icon-cart').click(function(){
         $(this).closest('li').clone().appendTo('#cart ul');
  });

我想对附加内容执行更多功能（更改类，应用动画等）

如何在此函数上执行回调，以允许我对附加数据执行函数？

Answer 1

jQuery的.each()接受一个回调函数并将其应用于jQuery对象中的每个元素。

想象一下这样的事情：

$('a.ui-icon-cart').click(function(){
  $(this).closest('li').clone().appendTo('#cart ul').each(function() {
    $(this).find('h5').remove(); 
    $(this).find('img').css({'height':'40px', 'width':'40px'});
    $(this).find('li').css({'height':'60px', 'width':'40px'});
  });
});

你也可以存储结果并改为工作：

$('a.ui-icon-cart').click(function(){
  var $new = $(this).closest('li').clone().appendTo('#cart ul')
  $new.find('h5').remove(); 
  $new.find('img').css({'height':'40px', 'width':'40px'});
  $new.find('li').css({'height':'60px', 'width':'40px'});
});

我还建议不要像你那样mofiying CSS，而是像这样在你的克隆li中添加一个类：

$(this).closest('li').clone().addClass("new-item").appendTo('#cart ul');

然后设置一些样式，如：

.new-item img, .new-item li { height: 40px; width: 40px; }
.new-item h5 { display: none }

Answer 2

不幸的是，在dom操作中添加回调并不是可以使用javascript以简洁的方式完成的。出于这个原因，它不在jQuery库中。但是，定时器“1ms”的settimeout总是将函数置于调用堆栈底部的settimeout中。这确实有效！ underscore.js库在_.defer中使用这种技术，它完全符合你的要求。

$('a.ui-icon-cart').click(function(){
    $(this).closest('li').clone().appendTo('#cart ul');
    setTimeout(function() {
        // The LI is now appended to #cart UL and you can mess around with it.
    }, 1);
});

Answer 3

你可以在分号上继续操作进一步的操作。

$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast');

等

Answer 4

在jquery中，您可以在附加内容代码之后使用$（）。这样，您可以在对附加内容执行任何任务之前，确保已加载内容并且DOM已准备就绪。

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$（）调用一个函数，该函数注册一个DOM就绪的回调（如果将函数传递给它）或从DOM返回元素（如果将选择器字符串或元素传递给它）

您可以在此处找到更多内容
difference between $ and $() in jQuery
http://api.jquery.com/ready/

Jquery - 追加后执行回调

4 个答案: