title: How can I make cells in a jquery-created table clickable?
body: <p>I worked with PHP quite a lot and have always been a little afraid of javascript and jquery. But two weeks ago I made the jump to jquery and I must say I really love it :-) I made several working scripts, also thanks to info I found on stackoverflow. So thanks everyone :-)</p>
  
  <p>But ... I spent many hours on this one issue I can not seem to solve... I will try to explain.</p>
  
  <p>On an index.php file I create a table with php (drawn from a mysql database with the typical SELECT * FROM ...). Every cell gets a unique id (eg Cell_1_1 as first,...). With Jquery I have a script that detects a click on a cell, takes the id of the cell and places a text input field in there with the content of the cell. I then detect an 'onchange' event (like enter) to use ajax to call a php script that changes the value of this one cell in the actual Mysql database (with UPDATE ... WHERE id = cellid statement).</p>
  
  <p>This all works fine and I am very happy with the power of jquery :-)</p>
  
  <p>For another reason however I want to create the original table not with php but with jquery. This also works fine. If you compare it the outputted html it is identical to that of the php script. But for some reason the jquery script can not detect when I click on a cell (of the jquery table). It has no problem placing a text field in the cell when I bind the detect on an external div. </p>
  
  <p>So jquery 'recognizes' the cell id's to change the cell. But not to detect onclick events.</p>
  
  <p>Does anyone have any idea how this is possible?</p>
  
  <p>Some parts of the code to clarify:</p>
  
  <pre><code>$(document).ready(function () {
    makeclickable();
    // script1: build the table when clicked on a div with the name of the table
    $(".showtable_x").click(function() { 
      var idlastclick = $(this).attr("id"); //take tablename from click
      $.ajax({ //let php return an array with the titles and the content of the table                                   
        url: 'inc/api/api.php',
        data: '&amp;table='+idlastclick,
        dataType: 'json',
        success: function(rows)        
        {
          var table = $('&lt;table&gt;&lt;/table&gt;');
          var numrow = rows.length; // take number of rows
          var numcol = rows[0].length; // number of cols
          for (i=0; i&lt;numrow; i++){ // for every row
            var row = rows[i]; // take row from array
            var row2 = $('&lt;tr&gt;&lt;/tr&gt;'); //create html row
            for (j=0; j&lt;numcol; j++){ // for every cell
              var cell = $('&lt;td&gt;&lt;/td&gt;').html(row[j]);//place content of array in cell
              var cellcounter = "cell_"+i+"_"+j; 
              cell.attr('id', cellcounter); // asign meaningfull id to the cell
              if (i==0) {
                var cell = cell.addClass("bgcolor1");
              } //the titles of the table
              row2.append(cell); // append the cell to the row
            }
            table.append(row2); // append the row to the table
          } // end for i
          $('#firstplaceholder').html(table);
        } // end function
      }); // end ajax;
    }); // end script 1
  </code></pre>
  
  <p>// script2: make sure cells are clickable and write to the database. (Works fine on a php created table)</p>
  
  <pre><code>  function makeclickable() {
      $('td').click( function() { // when click on cell
        if (!$("td.active")[0]){ // only execute when there is no other cell 'active'
          var idlastclick = $(this).attr("id"); // take id of the cell
          var content = $('#'+idlastclick).text(); // take the content of the cell
          $('#'+idlastclick).html("&lt;input type='text' id='textie' value='' /&gt;").addClass("active"); 
          $('#textie').attr("value", content).focus();    
          // place a textfield, place the content of the cell, mark the cell as 'active', focus on it
          $('#textie').on("keyup change", function() { // on type, remember the new value
            var value = this.value; 
            $('#textie').on("change", function() { // on enter
              $("td.active").empty().removeClass("active").addClass("exiting"); // clear cell, remove 'active' status, mark it (by class) as the cell to be written in
              $("td.exiting").html(value); // place new value in cell 
              // call php script that writes the new value to the database
              $.ajax({                                      
                url: 'inc/api/api2.php',
                data: '&amp;celid='+idlastclick+'&amp;content='+value,
              }); 
            }); // end 'on enter' detection
          }); // end 'on key-stroke' detection
          $("td.exiting").removeClass("exiting"); // restore original class to cell
        } // end if
      });
    }
  });
  </code></pre>