Problem with adding an icon to a button with jquery ui

All of my other buttons are showing up formatted correctly, with icons attached, aside from the createSave class button, in the after() function string. Anyone know what's up?

Jquery:

        $(".save,.createSave").button({
            icons: {
                primary: "ui-icon-disk"
            }
        });

       开发者_如何学运维 $('#newJudgeLink').click(function(){
            $(this).hide();
            $('#tableJudges tr:first').after('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
});

It looks like you're calling the button function before you've actually created the button. Try doing this:

$('#newJudgeLink').click(function(){
  $(this).hide();
  $('#tableJudges tr:first').after('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
  $(".createSave").button({
        icons: {
            primary: "ui-icon-disk"
        }
    });
});

It looks like you want to both run the jQuery UI plugin against the whole document on load, but then run it again against any newly created buttons. In this case it's probably easiest to create a reusable function that lets you pass in a context. E.g.,

function makeUIButtons(context) {
    $(context).find('.save, .createSave').button({
        icons: {
            primary: "ui-icon-disk"
        }
    });
}

// update existing buttons on load
makeUIButtons(document);

$('#newJudgeLink').click(function(){
    $(this).hide();
    var $newRow = $('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
    // update buttons in our new row
    makeUIButtons($newRow[0]);
    $newRow.insertAfter('#tableJudges tr:first');
});

Its a bit hard to say without a little bit more to go on. Do you have a link we can refer to?

I'm assuming in your css style sheet (not in-line right? :) ) has the styles specified for the button.createSave. If I were to wager a guess I'd bet its a css selector conflict (two different css styles conflicting with each other). But with a url to check and inspect I'd be able to provide a better answer for you.

Hope this helps

PS when in doubt... inspect with firebug (a firefox debugging extension, also available for chrome, safari probably has something comparable as well, IE has the developer toolbar, which works but in classic Microsoft fashion a little wonky)

-Matt