php - 为什么这个使用 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 元素没有启用？

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

标签： phpajaxcodeigniterjquery-select2

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();  
              },
          }); 
}