jQuery-UI .button() causing issues

Question

This is weird and totally unexpected. In my fiddle here , the code does not work if I do,

$("#id").button().click(function(){  
    ...
});

It works if I do,

$("#id").click(function(){  
    ...
});

What am I missing? For reference, I had used this .

jsFiddle

Answer 1

The problem is when you are trying to get the text of button you are using

$(this).html() // it's giving you the html of the button as <span class="ui-button-text">Start</span>

Use

$(this).text()

DEMO

UPDATE:

Use

$(this).html("<span class='ui-button-text'>Resume</span>");

Insted of

$(this).html("Resume");

This should be changed for all other button text ie Start, Pause.