How can I put icons on a jquery ui input button?

Question

Based on the jquery ui button documentation, I tried the following:

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

However the icon doesn't appear on the button. If I change the <input> to a <span>, it works; but I need the icons on a form submit button. Placing the <span> around the button doesn't help either (then I have a button inside a button).

I also tried the solution described in this stackoverflow question, but the .prepend span doesn't have an effect on my page. Any ideas?

Answer 1

Try this instead

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

I like to put my icon in my list and turn it into something more fun like:

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

And have your input as:

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

Answer 2

you can bind a click event to your span than it's like a button ... for example:

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

better way is to bind it in the jQuery loader function, for sure ;-)

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