在絕對定位元素中使用jQuery UI微調控件

Question

我在屏幕上動態地創建了一些控件，並且我想爲數字字段使用jQuery UI微調控件。我使用絕對定位我的元素，但它似乎不適用於UI控件。我用兩個控件的例子創建了一個jsfiddle。絕對控制不起作用。

https://jsfiddle.net/41u0kjsb/

<input type="text" style="height:18px;width:40px;top:55px;left:255px;position:absolute;z-index:101;font-family:Arial;font-size:10pt;text-align:right;padding-right:2px;" pt_properties="biu" pt_format="" pt_mask="" pt_readonly="False" pt_required="False" pt_dmn="QTY_FURN_100M" pt_type="N_NUMERIC" title="qty_furn_100M (QTY_FURN_100M)" tabindex="1" id="control1" maxlength="255" value="1"> 
<br><br><br> 
<input type="text" style="height:18px;width:40px;position:relative;z-index:101;font-family:Arial;font-size:10pt;text-align:left;padding-right:2px;" pt_properties="biu" pt_format="" pt_mask="" pt_readonly="False" pt_required="False" pt_dmn="QTY_FURN_100M" pt_type="N_NUMERIC" title="qty_furn_100M (QTY_FURN_100M)" tabindex="1" id="control2" maxlength="255" value="1"> 

    $('input[PT_TYPE="N_NUMERIC"]').spinner(); 

Answer 1

不要設置在插件的位置。相反，將其設置在微調的包裝已被創建後：

<input id="spin" style="position:relative;"> 

然後：

​​

例如：https://jsfiddle.net/3rf0xhqr/