javascript - 单击按钮生成物化选择

Question

当用户单击按钮时，我尝试创建多个选择表单。单击按钮时，我在初始化选择的表单时遇到一些问题。

到目前为止我已经尝试过:

$(document).ready(function() {

  $('select').material_select(); //This should initialize
  let output = {
    columnNumber: []
  };
  //let headers=[];
  let addColumnSource = $("#addColumnTemplate").html();
  let addColumnTemplate = Handlebars.compile(addColumnSource);

  $("#newColumnsButton").click(function() {
    $('select').material_select(); //Re-initialize after the button is clicked?
    for (let i = 1; i <= $("#numberOfColumns").val(); i++) {
      output.columnNumber.push(i);

    }
    $("#addColumnContainer").append(addColumnTemplate(output));

  });
$('select').material_select(); //Still not getting initialized 

});

还有:

$("#newColumnsButton").click("contentChanged", function() {

    for (let i = 1; i <= $("#numberOfColumns").val(); i++) {
      output.columnNumber.push(i);

    }
    $("#addColumnContainer").append(addColumnTemplate(output));
    $('select').on('contentChanged', function() {
      // re-initialize (update)
      $(this).material_select();
    });
  });

但是当用户单击按钮时，选择的表单仍然没有被渲染。我知道模板没有任何问题，因为附加了选择的表单。然而，它们在浏览器默认情况下并具有属性 display:none。

单击按钮时初始化选择表单的正确方法是什么？

Answer 1

当然是 10 分钟前的事了。你所要做的就是在追加你的dumbdumb之后进行初始化!

  $("#newColumnsButton").click(function() {
    for (let i = 1; i <= $("#numberOfColumns").val(); i++) {
      output.columnNumber.push(i);
    }
    $("#addColumnContainer").append(addColumnTemplate(output));
    $('select').material_select();
  });