上下移動表格行，但不能第二次移動

我在這裏創建了一個jsFiddle：http://jsfiddle.net/markrummel/SEQbd/。上下移動表格行，但不能第二次移動

我有三個錶行，每個行都有一個向上和向下按鈕。通過點擊向下按鈕，行將在其下面的行切換。通過點擊UP按鈕，該行與其上方的行切換。

我的代碼中的所有內容都可以上下切換行。但是，在移動一行之後，我無法再移動該行或與之交換的行。我仍然可以移動尚未移動/切換的行。

是否有某些功能需要撥打電話DOM中的table或個人tr s？我的假設是，jQuery不再識別這些行。

實例上的jsfiddle：

移動項目一下來，
看到現在項目一個和項目二不能向上或向下移動，
請參閱項目3仍然可以向上移動。

來源

2013-02-08 Mark Rummel

這是因爲你銷燬了你綁定click事件的元素。您可以輕鬆地通過使用deligating的.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-08 06:05:48 andlrc

感謝您的工作演示！我不太清楚在這種情況下如何使用'.append'，因爲我不會簡單地替換每個'.html（）'。我不想在不刪除舊內容的情況下將TR內容附加到新的TR中。雞和雞蛋的情況。我是否簡單地追加到持有'DIV'，然後準備好追加到新的'TR'？是否需要更多處理元素的銷燬/創建，這就是爲什麼'.append'更好？有其他原因嗎？ –

@MarkRummel我已經評論過你的觀點，然後放在我自己的右邊：看到它在這裏工作：http://jsfiddle.net/SEQbd/4/。還記得接受答案，如果它提供了正確的信息 – andlrc

比你！我將在早上審查所有這些，我確信在我完成所有工作後都會接受。我仍然好奇爲什麼append更好。非常感謝您的幫助！ –

原因應該是事件綁定丟失，當你通過.html（）重建表時，你需要做的只是重新綁定你的功能到那些移動的按鈕，或者只是不要移動按鈕，我意思是隻移動第一個TD什麼的。

來源

2013-02-08 06:05:35

這是一個有趣的想法，不移動按鈕，但我認爲錶行ID和數據屬性改變它的事實可能仍然會感到困惑。我不確定。也許值得一試。我如何重新綁定按鈕或重新綁定TR？ –

也許在td而不是tr上設置ID，或者甚至只是不移動任何東西，只是改變元素的ID值 –

上下移動表格行，但不能第二次移動

回答

相關問題