Question

我正在尝试为使用AJAX请求从数据库中收集的数据表构建一个过滤器（在Wordpress中）。有2个下拉菜单和一个提交按钮。问题是，当我点击提交按钮时，我的浏览器冻结，我收到错误：RangeError：超出最大调用堆栈大小。造成这种情况的原因是什么？

代码在加载页面时加载表格（包括下拉菜单和提交按钮）。然后，一旦加载，它就会加载“点击提交按钮”功能。

<script>
(function($
    jQuery(document).ready(function($){
        var amount = 10; //get amount of results to show per page
        $.post("<?php echo get_stylesheet_directory_uri(); ?>/ajax_table.php", {
            manual_filter: 1,
            //sector_id : '<?php echo $sector_id; ?>', //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("<?php echo get_stylesheet_directory_uri(); ?>/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);
</script>
<div id="table">
</div>

Answer 1

问题是，当我点击提交按钮时，我的浏览器会冻结我得到错误：RangeError：超出最大调用堆栈大小。造成这种情况的原因是什么？

$("#table").html(data);加载了id #submit的重复元素？点击#submit后，所有重复的#submit元素click处理程序都会被调用？导致添加更多重复的#submit元素并附加click个事件，并调用所有重复click元素的#submit个处理程序。

请注意，id在document内应该是唯一的。

click事件可以委托给#submit完整回调之外的table父元素$.post()附加的单一处理程序。

Answer 2

我最后修好了它。这与#submit按钮没有关系，它与下拉菜单有关。这就是它的工作原理：

var sectorALL = document.getElementById("sector_dropdown");
var sector = sectorALL.options[sectorALL.selectedIndex].value;

RangeError：超出最大调用堆栈大小。单击Ajax请求

2 个答案: