Jquery-выполнить обратный вызов после добавления

Я добавляю контент в список, используя:

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

Я хочу выполнить дополнительные функции для добавленного содержимого (изменить класс, применить анимацию и т. д.)

Как я могу выполнить обратный вызов этой функции, который позволит мне выполнять функции над добавленными данными?

30
append callback jquery live

4 ответов

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 }
26

к сожалению, добавление обратных вызовов в операции dom-это не то, что можно сделать аккуратно с помощью javascript. По этой причине он не находится в библиотеке jQuery. Однако settimeout с таймером " 1ms " всегда помещает функцию в settimeout в нижней части стека вызовов. Это работает! Символ подчеркивания.библиотека js использует этот метод в _.отложить, что делает именно то, что вы хотите.

$('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);
});
16

вы можете просто продолжать цепочку дальнейших операций в точке с запятой.

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

etc

4

в jquery вы можете использовать $ () сразу после добавления кода содержимого. Таким образом, вы можете быть уверены, что содержимое загружено и DOM готов перед выполнением любых задач над добавленным содержимым.

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

$ () вызывает функцию, которая либо регистрирует обратный вызов DOM-ready (если ему передается функция), либо возвращает элементы из DOM (если ему передается строка или элемент селектора)

вы можете найти больше здесь
разница между $ и $() в в jQuery
http://api.jquery.com/ready/

0