将 select2 添加到动态添加的元素

Posted 2023-05-08

【中文标题】将 select2 添加到动态添加的元素

【英文标题】：add select2 to dyanamically added element

【发布时间】：2021-06-15 21:36:51

【问题描述】：

我正在尝试将 select2 js 应用到我动态创建的元素中，谁能帮我解决这个问题

var a_html = '<div class="card skill_card"><div class="card-body media align-items-center"><div class="media-left mr-3"><span class="js-dragula-handle material-icons" style="cursor: move;">drag_handle</span></div><div class="media-body">' + '<a href="#<%=@pathn%>"><strong><%= @pathn %></strong></a>' + '</div><div class="media-right"><a href="" class="btn btn-flush ml-12pt" type="button" data-toggle="tooltip" data-title="Delete Path" data-placement="bottom" data-caret="false"><i class="material-icons icon-16pt">delete_outline</i></a></div></div></div>'

$(a_html).appendTo(".path_panel");

$('.path_list').append('<div id="<%= @pathn -%>"></div>');
<% js = escape_javascript(render(partial: 'admin/programmes/path', locals:  pathn: @pathn )) %>
$("#"+"<%= @pathn -%>").append("<%= js %>");
$("#"+"<%= @pathn -%>").find(".custom-select").select2();

部分页面代码--- _path.html.erb

        <div class="form-group d-flex align-items-end mb-16pt">
        <div class="form-group col-lg-8 mb-8pt pl-0">
            <label class="form-label" for="select03">Add Examples Tech</label>
            <p class="text-left">Description.</p>
            <select id="skill_select" data-toggle="select" multiple class="form-control custom-select" data-path="<%=@pathn%>">
                <%skills_data = skills_data ? skills_data : Org.skills_and_technologies%>
                <% skills_data.each do |sk| %>
                <option title="<%= "#sk.klass_#sk.id" %>"><%= sk.name.capitalize %></option>
                <% end %>
            </select>               
        </div>
        <div class=""><%= submit_tag "Add", :name => nil, class: "btn btn-accent btn-rounded mb-8pt ml-16pt add_skill", id: @pathn %></div>
    </div>

【问题讨论】：

如果您在 js 模板中执行它失败时，您不会在浏览器控制台中收到任何错误。你确定没有错误？代码看起来不错..

@razvans 没有错误，只是 select2 没有应用于选择框

试试setTimeout(function() $("#"+"<%= @pathn -%>").find(".custom-select").select2() , 0)，虽然它没有意义，因为追加是同步的。

您能否分享添加.custom-select 的代码，因为我无法在给定代码中找到任何具有该名称的类。如果它在另一个文件中，那么它可能是在执行 js 之后添加的。

@AbdulRehman 我添加了部分内容，您可以在其中找到“自定义选择”

【参考方案1】：

唯一想到的是，如果整个 js 模板没有错误，浏览器在append 之后看不到.custom-select。

AFAIK append 是同步的，应该应用选择。请试试这个：

setTimeout(function() 
  $("#"+"<%= @pathn -%>").find(".custom-select").select2() 
, 0)