title: RangeError: Maximum call stack size exceeded. Ajax Request on Click
body: <p>I'm trying to build a filter for a table of data that is collected from the database with an AJAX request (in Wordpress). There are 2 dropdown menus and a submit button. The problem is when I click on the submit button my browser freezes and I get the error: RangeError: Maximum call stack size exceeded.
  What's causing this?</p>
  
  <p>The code loads the table when the page is loaded (including the dropdown menus and the submit button). Then once it's loaded it loads the 'click submit button' function.</p>
  
  <pre><code>&lt;script&gt;
  (function($
      jQuery(document).ready(function($){
          var amount = 10; //get amount of results to show per page
          $.post("&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/ajax_table.php", {
              manual_filter: 1,
              //sector_id : '&lt;?php echo $sector_id; ?&gt;', //send the data to the page using this format
              amount : amount //send the data to the page
          }, function(data) {
              // data will hold the output from the script.php
              $("#table").html(data); //update the div with the output
  
              $("#submit").click(function (){
                  var sector = document.getElementById("sector_dropdown");
                  var year = document.getElementById("year_dropdown");
                  $.post("&lt;?php echo get_stylesheet_directory_uri(); ?&gt;/ajax_table.php", {
                      manual_filter: '1',
                      sector_id: sector,
                      year: year,
                      amount : amount //send the data to the page using this format
                  }, function(data) {
                      // data will hold the output from the script.php
                      $("#table").html(data); //update the div with the output
                  });
              });
  
          });
  
      });
  })(jQuery);
  &lt;/script&gt;
  &lt;div id="table"&gt;
  &lt;/div&gt;
  </code></pre>