設置一個動態創建按鈕的位置

Question

我有這樣的代碼來創建動態按鈕：

從@Rory McCrossan的回答here

function createRefreshButton() { 
    return $('<button/>', { 
     text: 'Refresh Data', 
     id: 'btn_refresh', 
     click: ClickRefresh 
    }) 
} 
$('body').append(createRefreshButton()) 

function ClickRefresh() { 
    alert('refresh'); 
} 

如何設置一些CSS屬性，如：{position : absolute, top: 50, left : 50}當創建按鈕？

我一直在使用.css()這樣的嘗試：

function createRefreshButton() { 
    return $('<button/>', { 
     text: 'Refresh Data', 
     id: 'btn_refresh', 
     click: ClickRefresh 
    }).css({position:absolute,top:50,left:50}); 
} 
$('body').append(createRefreshButton()) 

function ClickRefresh() { 
    alert('refresh'); 
} 

沒有成功！

Answer 1

您可以另一個屬性添加到用於配置其他屬性的對象 - 命名css：

function createRefreshButton() { 
 
    return $('<button/>', { 
 
     text: 'Refresh Data', 
 
     id: 'btn_refresh', 
 
     css:{position:"absolute",top:"50px",left:"50px"}, // <-- right here 
 
     click: ClickRefresh 
 
    }) 
 
} 
 
$('body').append(createRefreshButton()) 
 

 
function ClickRefresh() { 
 
    alert('refresh'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

function createRefreshButton(_top,_left,index) { 
 
    return $('<button/>', { 
 
     text: 'Refresh Data'+index, 
 
     id: 'btn_refresh'+index, 
 
     click: ClickRefresh, 
 
     css:{position:"absolute",top:(_top+"px"),left:(_left+"px")}, 
 
    }) 
 
} 
 
for(var i=0;i<250;i=i+25){ 
 
$('body').append(createRefreshButton(i,i,i)) 
 
} 
 
function ClickRefresh() { 
 
    alert('refresh'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>