jquery - change the title of a button

Question

i have button set up like:

<button id="invOn2" style="float: left;">Item 2</button>

the button is inside a dialog, and i am trying to change the title of the button as the dialog is being opened:

$('#invOn2').button( "option", "label", "shwaf");

this isnt working, what is wrong?

---

the suggestions havent worked as of yet, im going to elaborate on the structure of what im doing:

//jquery setup

 $(function() {
      $('#invOnBox').dialog({
            autoOpen: false,
            resizable: false,
            height: 350,
            width: 300,
      });
      $('#invOnButton').click(function() {
            $('#invOn1 button').html('shwaf');
            $('#invOnBox').dialog('open');
            return false;
      });
    });

//the invDialog and inner button

 <div id="invOnBox" title="Inventory">
    <button id="invOn1" style="float: left;">Item 1</button>
    </div>

//the invOnButton

<button id="invOnButton" style="float: left;">Inventory</button>

thanks!

Answer 1

try this:

$('#invOn2 button').html('shwaf');

Answer 2

isnt working

is not working very good as well. If you're using jQuery UI your syntax is correct.
See http://www.jsfiddle.net/KWx9Z/

So I guess you have a selector problem or you're executing too early (before doc ready?).

Answer 3

Well 2 things:

This selector won't find any elements

$('#invOn1 button')

Since it tires to find a button element inside the element with id #inv0n1, so change it to only the ID selector.

$('#invOn1')

I would also do the changes on the dialog open event. This due to that my dialogs are often dynamic ones.

$('#invOnBox').dialog({
        autoOpen: false,
        resizable: false,
        height: 350,
        width: 300,
        open : function () {
            $('#invOn1').html('shwaf');
        }
  });

..fredrik