为什么这个使用 AJAX 动态添加的选择输入不起作用？

Question

我在 codeigniter 视图中使用 Jquery 使用 ajax 调用来获取 HTML 定义中的表单字段。

     function getaddinfo(){
          var modtabgrp = $("#modtabgrp").val();
             $.ajax({
                url:base_url+"Base/gridaddfetch?modtabgrp="+modtabgrp,
                async:false,
                cache:false,
                success :function(data) {
                $('#liveform').append(data);

              },
          }); 
       }

现在此响应包含基于 select2 插件的输入，我能够正确显示所有输入，但 select2 输入未启用。 启用基于添加图标点击输入的select2插件的功能是这样的，

      $("#addicon").click(function(){
          $('#stateid').select2('val','2');
          $('#tabgropdropdown').select2('val','1');
        }

我还确保在单击#addicon 添加按钮之前，表单已加载并注入到 DOM 树中。那么为什么#liveform Div 中可用的#stateid 和#tabgropdropdown 元素没有启用？

换句话说，为什么添加按钮事件相关的事件没有与动态添加的输入元素绑定？

Answer 1

这里你需要在调用 ajax 后为该输入重新初始化 select2()。

function getaddinfo(){
          var modtabgrp = $("#modtabgrp").val();
             $.ajax({
                url:base_url+"Base/gridaddfetch?modtabgrp="+modtabgrp,
                async:false,
                cache:false,
                success :function(data) {
                $('#liveform').append(data);
                $('#stateid').select2();
                $('#tabgropdropdown').select2();  
              },
          }); 
}