calling a function when clicking inside a cell

Question

Why is this only says 'hi' when the page loads. but when I click on the cells nothing happens. I was expecting it to say 'hi' every time I click on one of the table cells.

Can someone tell me what I am doing wrong here?

JS :

$('.cards td').click(flip());

function flip(){
  alert('hi');
}

HTML

 <table>
      <thead>
        <th colspan='2'>Hello World</th>
      </thead>
    <tbody class="cards">
      <tr>
        <td id="1" class="orange">1</td>
        <td id="2" class="orange">2</td>
      </tr>
      <tr>
        <td id="3" class="orange">2</td>
        <td id="4" class="orange">1</td>
      </tr>
    </tbody>
    </table>

CSS:

table {
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
    height:25px;
}
.orange{
  background-color:orange;
  color:orange;
}

Answer 1

this:

$('.cards td').click(flip());

should simply be this:

$('.cards td').click(flip);