如何在 jquery ui 输入按钮上放置图标？

Question

根据 jquery ui 按钮文档，我尝试了以下操作：

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

但是该图标没有出现在按钮上。如果我将 更改为 ，它就可以工作；但我需要表单提交按钮上的图标。将 放在按钮周围也没有帮助（然后我在按钮内有一个按钮）。

我还尝试了 这个 stackoverflow 问题中描述的解决方案，但是 .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'>