title: TypeError: $(...) not a function
body: <p>I've used jQuery to create a page where users can click on a cell in a table that says, "delete," and it will send an ajax request to delete that entry from a database based on the id of the cell and then it will alter the CSS to hide the cell.</p>
  
  <p>I created a test page while I was creating/tweaking the jQuery code. This page works perfectly. Here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
    (function( $ ){
  $.fn.deleterow = function(event) { 
    if (!confirm('Are you sure you want to delete this student?')) {
        return false;
    }
    var id = event.target.id;
    $.ajax({
            url: 'delete.php',
            type: 'GET',
            data: 'id=' + id,
        });
    $(this).parent().css('display', 'none');
  }
  })( jQuery );
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;table border="1"&gt;
  &lt;tr&gt;
  &lt;td&gt;Cell 2, Row 2&lt;/td&gt;&lt;td onclick="$(this).deleterow(event);" id="13376"&gt;delete&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;html&gt;
  </code></pre>
  
  <p>Now I'm working on getting the code to work in the actual page that it's going to be used in. This page has a short form where users can select their name and a date. This form sends an ajax request that returns the results in a div. The data that is returned is a table , and this is where I'm trying to get my function to work. This table has a tablesorter script attached to it and also my function attached to it.</p>
  
  <p>The tablesorter still works fine, but nothing happens when I click the cell with "delete" in it. I used FireBug to look at the issue and it gives me the error, "TypeError: $(...).deleterow is not a function"</p>
  
  <p>Here is the code for the main page where the user submits a form and where the result is loaded in a div:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='jquery.tablesorter.js'&gt;&lt;/script&gt; 
  &lt;script type='text/javascript'&gt;
  $(document).ready(function() 
      { 
          $('#myTable').tablesorter(); 
      } 
  ); 
  &lt;/script&gt;";
  &lt;/head&gt;
  
  &lt;body id="my-students"&gt;
  &lt;?php include 'header.php'; ?&gt;
  
  &lt;?php include 'nav-tutoring.php'; ?&gt;
  
  &lt;div id="content"&gt;
  This is where you can view students whom you have assigned to tutoring.
  &lt;p&gt;
  
  You may change the way each column is sorted by clicking on the column header. 
  &lt;p&gt;
  &lt;b&gt;Select your name and the date to view students you have assigned for that day.&lt;/b&gt;
  
  &lt;form&gt; My form is here; removed to make post shorter  &lt;/form&gt;
  
  &lt;script&gt;
  $('#submit').click(function() 
  {
     $.ajax({
          type: 'POST',
          url: "mystudents.php",
          data: $('#name').serialize(),
          success: function(data) {
              $("#list").empty();
              $('#list').append(data);
  
          }
      });
                  return false;
  });
  &lt;/script&gt;
  
  &lt;div id="list"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the code for the page that is inserted into the div underneath the form. This is the page where the tablesorter works, but I cannot get my function to work. I've also made sure that I include these script libraries in the head of the main page where this div is.</p>
  
  <pre><code>&lt;script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='jquery.tablesorter.js'&gt;&lt;/script&gt; 
  &lt;script type='text/javascript'&gt;
  $(document).ready(function() 
      { 
          $('#myTable').tablesorter(); 
  
  (function($) {
  $.fn.deleterow = function(event) { 
    if (!confirm('Are you sure you want to delete this student?')) {
        return false;
    }
    var id = event.target.id;
    $.ajax({
            url: 'delete.php',
            type: 'GET',
            data: 'id=' + id,
        });
    $(this).parent().css('display', 'none');
  }
  })(jQuery);
  
  });
  &lt;/script&gt;
  
  &lt;table id='myTable' class='tablesorter' border="1"&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;ID Number&lt;/th&gt;&lt;th&gt;Last&lt;/th&gt;&lt;th&gt;First&lt;/th&gt;&lt;th&gt;Tutoring&lt;br&gt;Assignment&lt;/th&gt;&lt;th&gt;Assigning Teacher&lt;/th&gt;&lt;th&gt;Delete?&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;
  
  &lt;?php 
  while($row = mysql_fetch_array($data)){
      echo "&lt;tr&gt;&lt;td&gt;".$row['id']. "&lt;/td&gt;&lt;td&gt;". $row['last']. "&lt;/td&gt;&lt;td&gt;". $row['first']."&lt;/td&gt;&lt;td&gt;". $row['assignment']."&lt;/td&gt;&lt;td&gt;". $row['assignteacher']."&lt;/td&gt;&lt;td onclick='$(this).deleterow(event);' id='".$row['pk']."'&gt;Delete&lt;/td&gt;&lt;/tr&gt;";
  
  }
  ?&gt;
  &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>I've done many searches based on the error I'm getting, but I just can't seem to fix the problem. Any help would be greatly appreciated. </p>