Question

Here is the code that I’m trying to convert:

<script>
function fsomething(rowid) {
   window.location = "/somewhere/" + rowid;
}

</script>
<tr>
  <td>
      <button onClick="fsomething('{{rowid}}')">row 1L</button>
  </td>
  <td>
      <button onClick="fsomething('{{rowid}}')">row 2L</button>
  </td>
</tr>

How can I convert this to:

$('button').click(function() { .... } );

where {{rowid}} is dynamically generated, and unique to each row?

Answer 1

If you store the id using a data- attribute then you can get that out of the element when it is clicked.

<script>

$(function(){

    $("td button").click(function(e){

        // Go to the URL
        window.location = "/somewhere/" + $(this).data("rowid");

        // Prevent default action if any
        e.preventDefault();

    });

});

</script>

<tr>
    <td>
        <button data-rowid="{{rowid}}">row 1L</button>
    </td>
    <td>
        <button data-rowid="{{rowid}}">row 2L</button>
    </td>
</tr>