2

ここで jsFiddle を作成しました: http://jsfiddle.net/markrummel/SEQbd/。

3 つのテーブル行があり、それぞれに UP ボタンと DOWN ボタンがあります。DOWN ボタンをクリックすると、その下の行と行が切り替わります。UP ボタンをクリックすると、行がその上の行に切り替わります。

私のコードのすべてが機能して、行を上下に切り替えます。ただし、行を移動すると、その行または切り替えられた行を移動できなくなります。移動/切り替えされていない行を移動できます。

または個々の sを更新するために呼び出す必要がある関数はありtableますか? 私の仮定は、jQuery がこれらの行を認識しなくなったということです。DOMtr

jsFiddle の例:

  1. アイテム 1を下に移動し、
  2. アイテム 1とアイテム 2が上下に移動できないことがわかります。
  3. 項目3がまだ上に移動できることを確認します。
4

2 に答える 2

4

クリックイベントをバインドした要素を破棄するためです。.onを使用してイベントを委任することで、簡単に修正できます。

最初の行を次のように変更します。

$(document).on("click", 'button.change-rank', function() {

実際のデモ: http://jsfiddle.net/SEQbd/2/

しかし、これは最善の方法ではありません。常に要素を破棄/作成するのではなく、要素を移動するようにします。.html()とを使用する代わりに、使用.html(someStrng)できます.append( [jQuery Element/DOM Node] )

ここでデモを参照してください: http://jsfiddle.net/SEQbd/4/

コードは次のように簡単に記述できます: http://jsfiddle.net/3Wkfm/

$('button.change-rank').click(function() {                                                               
    var direction = $(this).attr('data-direction'),
        $original = $(this).closest("tr"),
        $target = direction === "up" ? $original.prev() : $original.next();

    if ( $target.length && direction === "up" ) {
        $original.insertBefore($target);
    }
    else if( $target.length ) {
        $original.insertAfter($target);
    }
});

var a = condition ? c : dは次のように書くのと同じです:

if ( condition ) {
    var a = c;
}
else {
    var a = d;
}
于 2013-02-08T06:05:48.453 に答える
0

その理由は、.html() を介してテーブルを再構築すると、イベント バインディングが失われるためです。必要なのは、移動したボタンに関数を再バインドするか、ボタンを移動しないことです。最初の td のみを移動することを意味します。か何か。

于 2013-02-08T06:05:35.550 に答える