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');

и т.д.