JQuery:超出 RangeError 最大调用堆栈

Question

我有一个更改事件，当选择框更改时会触发该事件。然而，选择框位于被替换的 div 内，因此会重新生成选择框。由于此错误可能是由于无限循环造成的，因此我猜测创建选择框时也必须触发我的触发事件。我尝试了很多事情但没有成功。

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

这是原始代码，没有任何尝试删除 Hook 或解决问题。

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 函数内的字符串永远不会打印出来，但 之前的所有内容code>post 确实如此。我什至注释掉了替换 DIV 内 HTML 的代码行，错误仍然存​​在。所以我想这毕竟不是死循环的原因。还有其他想法吗？

Answer 1

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

更改HTML 结构，以便#primary-div 内的选择仅在用户更改时更改。