jQuery: Append new object to DIV and act on that new object

I have a question that must be common but I dont know it.

If I append something (lets say SPAN) to a DIV, how can I act on that new SPAN at the same time?

function makeRotatable($clone) {
    $($clone).before('<span style="height:200px;"></span>').slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 60,
            slide: function( event, ui ) {
                $( "#a开发者_如何学JAVAmount" ).val( ui.value );
            }
        });

}

What I want to do is act on that newly appended SPAN. But the slider is acting on the $clone instead. What am I doing wrong?

Thanks!

Swap them around and use insertBefore():

$('<span style="height:200px;"></span>').insertBefore($clone).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 60,
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});

Use .insertBefore() instead, like this:

function makeRotatable($clone) {
  $('<span style="height:200px;" />').slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
  }).insertBefore($clone);
}

.insertBefore() returns the element before it as well, but it'll be the span in this case, which is what you're after. Also note that calling it after .slider() is a bit more efficient, since the plugin will work more quickly on a document fragment as it inserts elements.

The before function returns the $($clone) in your case. This is how jQuery's chaining works. To achieve your desired effect, chain on the newly appended SPAN instead:

$('<span style="height:200px;"></span>').insertBefore($($clone)).slider(...);

I would try:

  var span = $('<span style="height:200px;"></span>').slider({
                orientation: "vertical",
                range: "min",
                min: 0,
                max: 100,
                value: 60,
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.value );
                }
            }); 
    $($clone).before(span);