JQuery Grab text from td when button clicked

Question

Using the Scala Play Framework in case there is something that adds to the question here.

I have a test function ...

<script>
        $(document).ready(function(){
            $('.editbtn').click(function(){
                $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
            });
        });
    </script>

and a table

<table>
  <tr><td><button class="editbtn">edit</button></td></tr>
  <tr><td><button class="editbtn">edit</button></td></tr>
  <tr><td><button class="editbtn">edit</button></td></tr>
  <tr><td><button class="editbtn">edit</button></td></tr>
</table>

... and as per Html table with button on each row and http://jsfiddle.net/tXS6w/ I should be getting some cool "edit" <=> "modify" text changing action going on ... alas nothing!

even if I pop in an alert("hello world") in the function nothing happens. So my detective powers say that it is not being loaded.

It may be obvious, but I'm new to the javascript land :-)

Answer 1

Works for me:

 $('.editbtn').click(function() { $(this).html($(this).html() == 'edit' ? 'modify' : 'edit'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <button class="editbtn">edit</button> </td> </tr> <tr> <td> <button class="editbtn">edit</button> </td> </tr> <tr> <td> <button class="editbtn">edit</button> </td> </tr> <tr> <td> <button class="editbtn">edit</button> </td> </tr> </table>