php - RangeError: Maximum call stack size exceeded. Ajax Request on Click -
i'm trying build filter table of data collected database ajax request (in wordpress). there 2 dropdown menus , submit button. problem when click on submit button browser freezes , error: rangeerror: maximum call stack size exceeded. what's causing this?
the code loads table when page loaded (including dropdown menus , submit button). once it's loaded loads 'click submit button' function.
<script> (function($ jquery(document).ready(function($){ var amount = 10; //get amount of results show per page $.post("<?php echo get_stylesheet_directory_uri(); ?>/ajax_table.php", { manual_filter: 1, //sector_id : '<?php echo $sector_id; ?>', //send data page using format amount : amount //send data page }, function(data) { // data hold output script.php $("#table").html(data); //update div output $("#submit").click(function (){ var sector = document.getelementbyid("sector_dropdown"); var year = document.getelementbyid("year_dropdown"); $.post("<?php echo get_stylesheet_directory_uri(); ?>/ajax_table.php", { manual_filter: '1', sector_id: sector, year: year, amount : amount //send data page using format }, function(data) { // data hold output script.php $("#table").html(data); //update div output }); }); }); }); })(jquery); </script> <div id="table"> </div>
the problem when click on submit button browser freezes , error: rangeerror: maximum call stack size exceeded. what's causing this?
$("#table").html(data); loads duplicate elements having id #submit ? when #submit clicked, duplicate #submit elements click handlers called ? results in adding more duplicate #submit elements click events attached , calling click handlers of duplicate #submit elements .
note, ids should unique within document .
click event delegated single handler attached #submit parent element table outside of $.post() complete callback.
Comments
Post a Comment