Question

I have the following markup:

<button class="button" type="button"><span>Edit</span></button>

I want to have a click event on .button that changes the value of the next span.

So I have this as a test:

    $('.button').click(function(){
    $(this).next('span').val();
})

This returns ‘undefined’ however. How can I select the span?

Thank you!

Answer 1

you need to fix two things. First next() applies to sibling elements. your span is inside your button. So change that to children. Next to get the value inside a span element you’ll need to use .html()

$('.button').click(function(){
    $(this).children('span').html();
})

EDITED:
Here is a jsFiddle