web-dev-qa-db-ja.com

Jquery-追加後にコールバックを実行

私はリストにコンテンツを追加しています：

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

追加されたコンテンツにさらに機能を実行したい（クラスの変更、アニメーションの適用など）

この関数でコールバックを実行すると、追加されたデータで関数を実行できますか？

jquerycallbackappendlive
30
user342391

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

また、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
gnarf

残念ながら、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);
});
15
douwe

セミコロンでさらに操作を連鎖させることができます。

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

等

4
Scott Evernden

Jqueryでは、コンテンツコードを追加した直後に$（）を使用できます。これにより、追加されたコンテンツに対してタスクを実行する前に、コンテンツがロードされ、DOMが準備されていることを確認できます。

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

$（）は、DOM対応のコールバックを登録する関数を呼び出します（関数が渡された場合）またはDOMから要素を返します（セレクター文字列または要素が渡された場合）

詳細はこちらをご覧ください
jQueryの$と$（）の違い
http://api.jquery.com/ready/

0
AJchandu