jquery .html(...) changes unchanged?

Question

I'm trying to make changes inside an A tag with .html() and later make it a ui-button. The changes are ok, but then when I call the .button in the link just modified the changes are lost.

See this jsfiddle

I think that the problem is that the new inner html is not completely rendered and the .button function uses the old inner html to make the changes in the code, restoring it to its value before the html() call.

I've tried this but don't work. You can see it here

I know I can workaround it, but I would like to know why is this happening, is it a bug?

Thanks!

Answer 1

Try this

   $('#button').button({ icons: { primary: 'ui-icon-folder-open'} });
   $('#textChanger').click(
    function (){
        $('#button').button({
                              label: 'new text',
                              icons: {primary: 'ui-icon-custom', secondary: null}
                           });
        return false;
    })

here is the working fiddle