Question

I’ve created a jsFiddle here: http://jsfiddle.net/markrummel/SEQbd/.

I have three table rows, each with an UP and DOWN button. By clicking the DOWN button the row is switched with the row below it. By clicking the UP button the row is switched with the row above it.

Everything in my code works to switch the rows up and down. However, after a row is moved I can no longer move that row or the row it was switched with. I can still move rows that have not been moved/switched.

Is there some function I need to call to refresh the table in the DOM or the individual trs? My assumption is that jQuery is just no longer recognizing these rows.

Example on jsFiddle:

1. Move Item One down,
2. See that now Item One and Item Two can’t be moved up or down,
3. See that Item 3 can still be moved up.

Answer 1

It because you destroy the elements where you a bound the click event. You can easily fix it by deligating the event using .on:

Change the first line to:

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

Working demo: http://jsfiddle.net/SEQbd/2/

---

But this isn’t the best approach. I would make sure to move the elements around and not destroying / creating elements all the time. Instead of using .html() and .html(someStrng), you can use .append( [jQuery Element/DOM Node] )

See demo here: http://jsfiddle.net/SEQbd/4/

---

You can write your code as simple as this: 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 is the same as writing:

if ( condition ) {
    var a = c;
}
else {
    var a = d;
}