Sortable/Draggable and custom DIV

Question

I'm trying to create a jquery sortable with a twist. I'm duplicating the object from a draggable list but then, when the items are dropped, I want to be able to enable a div with specific information for that item that I just dropped.

Fidle of what I currently have http://jsfiddle.net/TxYh2/1/

I've tried something along the lines of

        update: function (event, ui) {
          $(document).on('click', 'ul a', function () {
              $("#dialog-message").dialog();
          });

but I keep adding more and more event handlers and I have no clue on how to create the DIV that is going to be unique for each new created element.

As soon as one of the Template X is dropped onto the previous List, how can I have a link that will open a Div specifically for that item? I've tried everything I can but I'm no so proficient with JQuery yet.

Thanks for any provided help.

Answer 1

I believe the updated fiddle at http://jsfiddle.net/TxYh2/3/ shows how to do what you want. The change is as follows:

    ui.item.off('click').on('click', 'a', function () {
        ui.item.append('<div>Properties for ' + ui.item.text() + '</div>');
    });

The main point is to attach the event listener to the specific item that's being added, not the entire document, which you can get using the ui.item reference. This reference also lets you get information about the item being added for your new properties div.