在AJAX提交后重新加载Select2 jQuery

cpjpxq1n  于 2022-10-24  发布在  jQuery
关注(0)|答案(1)|浏览(268)

我有一个使用Select2多选字段的表单,该字段的初始化方式如下:

jQuery(document).ready(function() {
  jQuery('#cred_form_1283_1_1_select-children').select2({
  dropdownParent: '#addChildModal',
  multiple: 'true',
  placeholder: 'Select Child(ren)'
  });
});

这样做效果很好:

在AJAX提交或验证之后,Select2不会加载回表单:

在阅读了许多关于这方面的帖子后,我仍然无法让它工作。示例帖子:
https://stackoverflow.com/a/21664216
我知道您应该使用**on()**事件处理程序重新加载它,我已经尝试了多种方法,如下所示:

jQuery(document).ready(function(){
  jQuery('#cred_form_1283_1_1').on('change','#cred_form_1283_1_1_select-children', function(){
    //alert('OK!');
    jQuery(this).select2({
      dropdownParent: '#addChildModal',
      multiple: 'true',
      placeholder: 'Select Child(ren)'
    });
  });
});

在表单ID为**#CRED_FORM_1283_1_1的情况下,我也尝试了DOCUMENT**,但都不起作用。

**ON()**正在工作,因为更新Select2时将触发注解警告框,但Select2本身根本不会重新加载。

有人能指出这里的错误吗?

gopyfrb3

gopyfrb31#

原来这个问题与工具集插件有关。我在他们的代码中发现了一个名为CRED_FORM_READY的钩子,但如果您使用它,那么只要表单准备好了,它就会工作。

jQuery(document).on( 'cred_form_ready', function($) {
  jQuery('#cred_form_1283_1_1_select-children').select2({
    dropdownParent: '#addChildModal',
    multiple: 'true',
    placeholder: 'Select Child(ren)'
  });
});

每当进行任何AJAX调用时,它都会重新加载jQuery,并且每次都能完美地运行。

相关问题