Jquery - Perform callback after append
Solution 1
jQuery's .each()
takes a callback function and applies it to each element in the jQuery object.
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:
$(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 }
Solution 2
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.
$('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);
});
Solution 3
You can just keep chaining further operations at the semicolon.
$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast');
etc
user342391
Updated on September 13, 2020Comments
-
user342391 over 3 years
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?