使用Django实现动态双选列表框时jQuery插件按钮无响应求助

问题原因及解决方法 #

你在Django中接入jQuery动态双选列表插件后按钮无响应，可按以下步骤排查修复：

• 缺少jQuery核心依赖引入
  该双选插件依赖jQuery运行，你当前仅引入了插件本身的CSS和JS文件，未引入jQuery核心库。需要在base.html中，插件JS文件的引入代码之前，先引入本地托管的jQuery库：

  <script src="{% static 'js/jquery.min.js' %}"></script>
  

• 插件初始化时机错误
  现有初始化代码未等待DOM完全加载就执行，容易因资源加载顺序偏差导致初始化失败，无法绑定按钮点击事件。修改vdl.html中的初始化脚本如下：

  $(document).ready(function(){
      $(".jp-multiselect").jQueryMultiSelection();
  });
  

• 表单字段组件不匹配
  Django的ModelMultipleChoiceField默认渲染的多选框结构可能不符合插件要求，需要为两个多选字段显式指定SelectMultiple组件，修改forms.py对应的字段定义：

  stations = forms.ModelMultipleChoiceField(
      queryset=station_all,
      widget=forms.SelectMultiple(attrs={'class': 'form-control'})
  )
  selected_stations = forms.ModelMultipleChoiceField(
      queryset=Station.objects.none(),
      widget=forms.SelectMultiple(attrs={'class': 'form-control'})
  )
  

• 静态资源加载异常排查
  打开浏览器开发者工具，分别查看控制台和网络面板：
  1. 确认插件的CSS、JS文件没有404报错，Django开发环境下需确保settings.py中开启了django.contrib.staticfiles，STATIC_URL配置正确
  2. 排查是否存在JS报错，如出现$ is not defined就是未正确引入jQuery的典型报错
• 后续业务逻辑补充
  你当前的views.py中，POST请求校验通过后没有编写数据保存逻辑，按钮点击问题解决后需要补充对应业务代码，否则提交表单后不会生成业务记录。

内容的提问来源于stack exchange，提问作者Giuseppe Ricci