Jquery - 追加后执行回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3113853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery - Perform callback after append
提问by user342391
I am appending content to a list using:
我正在使用以下方法将内容附加到列表中：
$('a.ui-icon-cart').click(function(){
$(this).closest('li').clone().appendTo('#cart ul');
});
I want to perform further functions to the appended content (change class, apply animations etc)
我想对附加的内容执行进一步的功能（更改类、应用动画等）
How can I perform a callback on this function that will allow me to perform functions on the appended data?
如何对这个函数执行回调，以便我对附加的数据执行函数？
采纳答案by gnarf
jQuery's .each()takes a callback function and applies it to each element in the jQuery object.
jQuery.each()接受一个回调函数并将其应用于 jQuery 对象中的每个元素。
Imagine something like this:
想象一下这样的事情：
$('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'});
});
});
You could also just store the result and work on it instead:
您也可以只存储结果并对其进行处理：
$('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'});
});
I would also suggest that instead of mofiying the CSS like that you just add a class to your cloned li like this:
我还建议您不要像这样修改 CSS，而是像这样向克隆的 li 添加一个类：
$(this).closest('li').clone().addClass("new-item").appendTo('#cart ul');
Then setup some styles like:
然后设置一些样式，例如：
.new-item img, .new-item li { height: 40px; width: 40px; }
.new-item h5 { display: none }
回答by douwe
Unfortunatly adding callbacks to dom operations is not something that can be done in a neat fashion using javascript. For this reason it is not in the jQuery library. A settimeout with the timer "1ms" however always puts the function in the settimeout on the bottom of the call stack. This does work! The underscore.js library uses this technique in _.defer, which does exactly what you want.
不幸的是，向 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);
});
回答by Scott Evernden
You can just keep chaining further operations at the semicolon.
您可以继续在分号处链接进一步的操作。
$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast');
etc
等等
回答by AJchandu
In jquery you could use $() just after your appending contents code. This way you can be sure that the content is loaded and the DOM is ready before performing any tasks on the appended content.
在 jquery 中，您可以在附加内容代码之后使用 $() 。通过这种方式，您可以在对附加内容执行任何任务之前确保内容已加载并且 DOM 已准备就绪。
$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});
$() calls a function that either registers a DOM-ready callback (if a function is passed to it) or returns elements from the DOM (if a selector string or element is passed to it)
$() 调用一个函数，该函数要么注册一个 DOM 就绪回调（如果一个函数被传递给它）要么从 DOM 返回元素（如果一个选择器字符串或元素被传递给它）
You can find more here
difference between $ and $() in jQuery
http://api.jquery.com/ready/
