javascript - jQuery listener target seems to break after the object is moved with append()

Question

I have a series of objects that have a link inside to toggle a swap. The "next" swap algorithm appends the current object to the next object.

$('a.getNext').click(function() {
    var selector = 'div.foo';
    var currentObject = $(this).parents(selector).first();
    var nextObject = currentObject.nextAll(selector).first();
    nextObject.append(currentObject);
});

The swap happens but the link that invoked the swapping (in the "current" context) no longer works. Watching the debugger, after clicking the link again and seeing what object currentObject appears to be, it's empty whitespace in the browser. How can I reestablish the connection between the click() target and the correct "new"(?) foo div it lives inside?

Here's a working example: http://jsfiddle.net/Z863z/2/

Answer 1

It should be...

currentObject.insertAfter(nextObject);

... instead of nextObject.append(currentObject); check this fiddle for illustration (and a few streamlines as well). Your goal is to move the current container after the next one.

Your original code is placing the current element inside the next one. That's why the look-ups no longer work: the structure becomes broken.