Select2 nicht auf dynamische div

Question

Ich habe eine Funktion zum Erstellen dynamischer div über Vorlage Literal, in jedem div ich einen Select2 Select Filter hinzufügen möchten, aber wenn das dynamische div auf meiner Seite gerendert wird, select2 nicht initialisieren, Kann jemand das beheben? unten ist ein Beispiel-Snippet-Code:

javascript:

function render_report_grid(data){ 
      var details = `<select class="filter_select2 pull-right" 
          id="filter_select2_${data.id}" multiple="multiple" name="select_project"> 
          </select>` 
} 

$('.filter_select2').select2({placeholder: "Select parent",}); 

Answer 1

Sie sollten die Einleitung Teil innerhalb der Funktion wie hinzufügen:

function render_report_grid(data){ 
    var details = `<select class="filter_select2 pull-right" 
        id="filter_select2_${data.id}" multiple="multiple" name="select_project"> 
        </select>` 

    $('.filter_select2').select2("destroy").select2({placeholder: "Select parent"}); 
} 

Also jedes Mal, wenn Sie einen neuen select-Tag hinzugefügt ist Initiiere es als select2-Instanz.

Answer 2

Ich denke, dass das Problem ist, dass Sie die select2 erstellen, bevor Sie es zu Ihrer Seite hinzugefügt haben, so dass, wenn Sie tun:

$('.filter_select2').select2({placeholder: "Select parent"}); 

Die jQuery-Selektor nichts gefunden hat, so müssen Sie fügen Sie es vor dem html hinzu:

var details = '<select class="filter_select2 pull-right" id="filter_select2_${data.id}" multiple="multiple"name="select_project"></select>'; 
$('some_jquery_selector').append(details); 
$('.filter_select2').select2({placeholder: "Select parent"});