如何將圖標放在jQuery UI輸入按鈕上？

Question

基於jQuery UI的按鈕文檔上，我試過如下：

<jquery>$("#test").button({ icons: { primary:'ui-icon-gear' } });</jquery> 
<input id="test" type="submit" value="test"></input> 

但是圖標不上的按鈕出現。如果我將<input>更改爲<span>，它可以工作;但我需要表單提交按鈕上的圖標。在按鈕周圍放置<span>也無濟於事（然後我在按鈕內部有一個按鈕）。

我也嘗試了this stackoverflow question中描述的解決方案，但是.prepend跨度對我的頁面沒有影響。有任何想法嗎？

Answer 1

您可以將點擊事件綁定到您的跨度，而不是像按鈕一樣...例如：

<form id="myForm" ...> 
... 
    <span onclick="document.myform.submit()" class="jqueryUI" id="myButton">Butotnvalue</span> 
... 
</form> 

更好的方法是將其綁定在jQuery的裝載機功能，確保;-)

$('#myButton').bind('click', function(){ 
    $('#myForm').submit(); 
}); 

Answer 2

試試這個

$("#test input").each(function() { 
    $(this).button({ icons: { primary: 'ui-icon-gear' } }); 
}); 

我喜歡把我的列表我的圖標，把它變成更有趣的東西，如：

$("#test input").each(function() { 
    $(this).button({ icons: { primary: $(this).attr('icon') } }); 
}); 

，讓你的輸入爲：

<input id="test" type="submit" value="test" icon='ui-icon-gear'>