JQuery - выполнить обратный вызов после добавления
Я добавляю содержимое в список, используя:
$('a.ui-icon-cart').click(function(){
$(this).closest('li').clone().appendTo('#cart ul');
});
Я хочу выполнять дополнительные функции с добавленным контентом (класс изменения, применять анимацию и т.д.)
Как я могу выполнить обратный вызов этой функции, которая позволит мне выполнять функции над добавленными данными?
Ответы
Ответ 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 }
Ответ 2
Несчастливо добавляя обратные вызовы к операциям dom, это не то, что можно сделать аккуратно, используя javascript. По этой причине это не в библиотеке jQuery. Однако установка с таймером "1 мс" всегда помещает функцию в настройку в нижней части стека вызовов. Это работает! Библиотека 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);
});
Ответ 3
Вы можете просто сохранить цепочку дальнейших операций в точке с запятой.
$(this).closest('li').clone().appendTo('#cart ul').addClass('busy').fade('fast');
и т.д.