如何在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'>