jquery - jQueryAFTERクリックイベント

Question

バグを修正するためにJqueryプラグインを変更しようとしています。

以下は、すべてがどのように関連付けられているかを示すコードです。

$('.' + settings.activeClass).live('click', function(){
    select(this);
    alert( $('#pg li.selected').height() );
    .......
});

function select(el){
hideSelected(function(){
    $(el).addClass('selected').removeClass('active');
    $(el).animate(settings.selectedCSS, 'slow');

});
}

したがって、「選択された」クラスが追加される前の高さは約116pxです

$(el).addClass('selected').removeClass('active');

'selected'クラスが追加された後、レンダリングされたhtmlページに表示される高さは約378pxであると想定され、高さは378pxに更新されます

alert( $('#pg li.selected').height() );

ただし、高さの値を出力しようとすると、「選択された」クラスが追加される前の古い値がキャプチャされたままになります。

これは、「選択された」クラスが追加された後に高さの値を印刷するためにアラートボックスを追加した奇妙な部分です。高さの新しい値を取得するはずでしたが、明らかにそうではありません。

だから、私は解決策を考えました、多分JQueryはアフタークリックイベントのためのある種のイベントを持っていますか？またはこれに対する代替ソリューション？

score 1 · Accepted Answer

あなたのアニメーションはアラートの非同期を実行します。animate コールバックで達成したいことは何でも処理する必要があります。

http://api.jquery.com/animate/

以下のようなので：

$('.' + settings.activeClass).live('click', function(){
  select(this);
  // NOT HERE alert( $('#pg li.selected').height() );
  .......
});

function select(el){
  hideSelected(function(){
    $(el).addClass('selected').removeClass('active');
    $(el).animate(settings.selectedCSS, 'slow', function(){
      //here
      alert( $('#pg li.selected').height() );
    });
  });
}

編集:私のコメントで述べたように、ブール値の引数を渡して、アニメーション関数に非同期または同期で処理するように指示するオプションもあります。

アニメーション API : http://api.jquery.com/animate/

キューの処理に関連する特定のテキスト:

.animate( properties, options ) *properties : アニメーションが移動する CSS プロパティのマップ。options メソッドに渡す追加オプションのマップ。

サポートされているキー:

duration: アニメーションの実行時間を決定する文字列または数値。
easing: トランジションに使用するイージング関数を示す文字列。
complete: アニメーションが完了したら呼び出す関数。step: アニメーションの各ステップの後に呼び出される関数。
queue: アニメーションをエフェクトキューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。jQuery 1.7 以降、queue オプションは文字列も受け入れることができます。この場合、アニメーションはその文字列によって表されるキューに追加されます。
specialEasing: properties 引数で定義された 1 つ以上の CSS プロパティのマップと、それに対応するイージング関数 (1.4 で追加)。

jquery - jQueryAFTERクリックイベント

1 に答える 1

Related

Reference