How to change button text in JQuery

Question

I have this working code so far:

Fiddle: http://jsfiddle.net/r4emt/12/

Right now before you enter the JQuery UI autocomplete, the button reads "Hello". You can type "item" in the JQuery UI autocomplete and you'll notice the button now says "World". Click on the "world" button to put item in the list. If you type item again you can select one and click the replace button on an item already in the list. However once you do this, The button still says "world" but it should say "hello" because there is nothing in the input field. If you click in the input field and then hit delete or back arrow it changes back to "hello" but there isn't anything there to delete or go to the left of. I think it has to do with this part of the code:

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

Specifically the 'keyup' part. So my question is how can I fix this so that whenever the input box is empty the button always reads "hello" and when there is input in the field, the button reads "world"? Thanks!

Answer 1

I know this is a long dead thread, but I needed to add this, because I've just spent 2 days tracking down a memory leak (Caused by me using code from this page).

IMPORTANT: Do not use jQuerys text() on button elements!

The function creates something in the DOM that cannot be removed by empty(). If you then call the function multiple times over a long period a large amount of rubbish will be plopped in your DOM, causing stuff to break.

See jQuery API documentation.

(Can't find exactly where its mentioned in the documentation, but its in there somewhere, I've got to run for my train now)...