时间戳

首页 > 解决方案 > 将 select2 添加到动态添加的元素

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

问题描述

我正在尝试将 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>

标签： javascriptjqueryruby-on-railsajax

解决方案

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

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

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

推荐阅读