Question

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 ) {
                $( "#amount" ).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!

Answer 1

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.