jQuery：將新對象附加到DIV並對新對象執行操作

Question

我有一個問題必須是常見的，但我不知道它。

如果我將一些東西（可以說SPAN）添加到DIV中，我該如何在同一時間對新SPAN執行操作？

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); 
      } 
     }); 

} 

我想要做的就是對新添加的SPAN採取行動。但滑塊正在作用於$ clone。我究竟做錯了什麼？

謝謝！

Answer 1

使用.insertBefore()代替，就像這樣：

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()返回元素之前一樣好，但它會在這個跨度情況，這是你在追求什麼。還要注意，在.slider()之後調用它會更有效一些，因爲插件在插入元素時會更快地處理文檔片段。

Answer 2

左右交換它們並使用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); 
    } 
}); 

Answer 3

before函數返回$($clone)你的情況。這是jQuery的鏈接工作方式。爲了達到你想要的效果，對新追加的SPAN代替鏈：

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

Answer 4

我會嘗試：

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);