title: What is the selector for any link inside a table
body: <p>I have php page with a drop down selector, i use jquery, ajax and mysql to produce a table when the selector is changed and drop into a div called .mytable. Some of the data in the table are links to php scripts which effect the data in the table, so I want to refresh the table without a reload.</p>
  
  <p>I know I need to do this by attaching an event listener to the links in the table, but I cant seem to get the right selector to attach the listener to?</p>
  
  <p>Any help would be appreciated</p>
  
  <p>The page the user sees, called user.php is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="css/table_style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  &lt;form name="form1" method="post" action=""&gt;
    &lt;label for="select_data"&gt;&lt;/label&gt;
    &lt;select name="select_data" id="select_data"&gt;
      &lt;option value=1&gt;"Apples"&lt;/option&gt;
      &lt;option value=2&gt;"Pears"&lt;/option&gt;
      &lt;option value=3&gt;"Bananas"&lt;/option&gt;
    &lt;/select&gt;
  &lt;/form&gt;
  
  &lt;div id="mytable"&gt;This is where the table goes&lt;/div&gt;
  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="get_table.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The jquery event handler is:</p>
  
  <pre><code>$(document).ready(function (){
      //listen for select list to change, pass fruit into create_table.php, pass data into mytable div
      $('#select_data').change(function() {
          $.post('create_table.php',{fruit: fruit}, function(data) {
              $('div#mytable').html(data);});     
  
      });
  
      $('.fruit_link').change(function() {
          $.post('create_table.php',{fruit: fruit}, function(data) {
              $('div#mytable').html(data);});     
  
      });
  
  });
  </code></pre>
  
  <p>The script that the event handler calls which creates the table and returns the html code is:</p>
  
  <pre><code>&lt;?php
  
  require_once('Connections/dbc.php');
  $fruit=$_POST['fruit'];
  $sql="SELECT * FROM q_fruit WHERE FruitID =".$fruit;
  $rec1=mysqli_query($dbc,$sql);
  
      echo '&lt;table class="table" align="center"&gt;';
      echo '&lt;th class="th" width="80px"&gt;Fruit ID&lt;/th&gt;';
      echo '&lt;th class="th" width="150px"&gt;Fruit Name&lt;/th&gt;';
      echo '&lt;th class="th" width="40px"&gt;Fruit Action 1&lt;/th&gt;';
      echo '&lt;th class="th" width="150px"&gt;Fruit Action 2&lt;/th&gt;';
  
      while ($row=mysqli_fetch_array($rec1)) 
          {
  
              echo '&lt;tr class="tr"&gt;';
              echo '&lt;td class="td"&gt;'.$row['FruitID']. '&lt;/td&gt;';    
              echo '&lt;td class="td"&gt;'.$row['FruitName']. '&lt;/td&gt;'; 
              echo '&lt;td class="td"&gt;&lt;a class="fruit_link" href="fruitaction1.php"&gt;'.$row['FruitID']. '&lt;/a&gt;&lt;/td&gt;'; 
              echo '&lt;td class="td"&gt;&lt;a class="fruit_link" href="fruitaction2.php"&gt;'.$row['FruitID']. '&lt;/a&gt;&lt;/td&gt;'; 
              echo '&lt;/tr&gt;';
           }
  
      echo '&lt;/table&gt;';
  
  
      mysqli_free_result($rec1);
      mysqli_close($dbc);
  
  ?&gt;
  </code></pre>
  
  <p>So, the select event handler is working to reproduce the table every time a value is changed, but the link handler is not, I'm presuming its because the links are in the html thats returned and not already present in the user file which the java is listening to. Is there a way round this?</p>