Question

I am trying to update the text of a button when it is clicked. I have a number of buttons with the same class but no id. Why doesn’t this work?

<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />
<input type="button" class="add-button" value="Default" />

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        $(this).html('Changed');
    });
});​

The alert is triggered, but the button isn’t changed.

Answer 1

Use this.value for input. See below,

$(document).ready(function() {
    $('.add-button').click(function() {
        alert('clicked');
        this.value = 'Changed';
    });
});​

DEMO: http://jsfiddle.net/qU5tR/10/