JQuery: 超出 RangeError 最大调用堆栈

Question

我有一个 on change 事件，它会在 select 框发生变化时触发。但是，select 框位于被替换的 div 内，因此会重新生成 select 框。由于这个错误可能是由无限循环引起的，我猜我的触发事件也必须在创建 select 框时触发。我试了很多东西都没有成功。

有谁知道如何防止此事件在创建时触发并且仅在手动更改该部分时触发？

这是原始代码，没有尝试删除挂钩或解决问题。

jQuery('#primary-div .options_box').on( 'change', 'select', function(e) {
    e.preventDefault();

    // prevent user from changing again until this process is complete
    jQuery('#primary-div').block({ message: null, overlayCSS: { background: '#f1f1f1', backgroundSize: '32px 32px', opacity: 0.6 } });

    var sel_type = jQuery('#chart_type');
    var sel_month = jQuery('#chart_month');
    var sel_year = jQuery('#chart_year');

    var data_ap = { action: 'update_primary_div', type: sel_type, month: sel_month, year: sel_year };
    $.post( ajaxurl, data_ap, function( response ) {

        $( '#primary-div' ).html( response );

    });

});

更新

调试时，我在每行代码后添加了console.log()行，发现post函数中的字符串永远不会打印出来，但是post之前的都可以。我什至注释掉了 DIV 中替换 HTML 的代码行，错误仍然存在。所以我在想这毕竟不是无限循环的原因。还有其他想法吗？

Answer 1

因为 .options_box 在 #primary-div 中，当从 Ajax 调用 收到响应时，HTML #primary-div被更新，导致.options_box再次被修改...

更改 HTML 结构 因此 #primary-div 中的选择仅在用户更改它们时更改。

Answer 2

想通了。在找到一篇有用的文章后，我了解到堆栈错误更常见的原因是将非法参数传递给函数。正是在这一点上，我意识到了我的错误。 jQuery 不允许您将其完整变量传递给 post 函数（这不是我的意图，我在从 select 框中获取所选值时忘记了一段重要的代码):

var sel_type = jQuery('#chart_type').val(); var sel_month = jQuery('#chart_month').val(); var sel_year = jQuery('#chart_year').val();

JQuery: 超出 RangeError 最大调用堆栈

JQuery: RangeError maximum call stack exceeded

jquery

events

onchange

更新