Click event not processed when using prototype (with lowpro)

Question

I have JS code that uses lowpro (prototype extension) to reorder a set of dynamically generated questions. So when I click a.move-up I want to move that element's parent up. And a.move-down suppose to move it down.

I'm using lowpro since the elements are generated after dom:loaded. http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

JS code:

document.observe('dom:loaded', function() {
  Event.addBehavior( {
   'a.move-up:click':  function(event) {
        alert('Moving up!')
        //moveUp(this);
        //event.stop();

    },
   'a.move-down:click':  function(event) {
        alert('Moving down!')
        //moveDown(this);
        //event.stop();
    }
  });
});

I have two links for each element (div.question) that allow that element to be moved up or down. However these click events don't get processed.

<div id="questions">    
    <div class="question">Q1 stuff 
    <a href="#" class="move-up" />Up</a>
        <a href="#" class="move-down"/>Down</a>
    </div>

    <div class="question">Q2 stuff
    <a href="#" class="move-up" />Up</a>
        <a href="#" class="move-down"/>Down</a>
    </div>
</div>

As part of debugging I've cut down the code to bare minimum, just trying to make sure event handling works. I don't even see the alert pop-up when I click the JS-backed links. So the "click" event isn't being handled properly.

What am I doing wrong???

Thank you!

Answer 1

After doing some reading/research I realized that elements that are generated dynamically...

wait for it...

are not registered/bound after DOM loads, thus the addBehavior needs to be reload()-ed for it to pick up new elements.

So after dynamically generating new elements, there has to be a call to

 Event.addBehavior.reload();

After that call, new dynamically-generated elements can be moved up/down just like I want.

I knew it had to be something as simple and obvious as that... sigh