Layuiで動的に入力フィールドを追加する方法は?

Layuiで、以下のコードを使って動的に入力フィールドを追加することができます。

<div id="container">
    <button class="layui-btn layui-btn-primary" id="addInput">添加输入框</button>
</div>

<script>
layui.use(['element', 'form'], function(){
  var element = layui.element;
  var form = layui.form;
  
  // 添加输入框
  $("#addInput").on("click", function() {
    var inputHtml = '<div class="layui-form-item"><input type="text" name="input[]" placeholder="请输入内容" autocomplete="off" class="layui-input"></div>';
    $("#container").append(inputHtml);
    
    // 重新渲染表单元素
    form.render();
  });
});
</script>

ボタンをdivコンテナに配置し、ボタンをクリックすると、コンテナに動的に入力フィールドが追加されます。

JavaScriptのコードでは、最初にlayui.useメソッドを使用してelementとformのモジュールを読み込み、その後、クリックイベントの処理関数で、jQueryのappendメソッドを使用して入力ボックスのHTMLコードをコンテナに追加します。

最終的に、フォーム要素を再レンダリングするためにform.render()メソッドを呼び出し、新しく追加された入力フィールドが正しくスタイルが表示されるようにします。

bannerAds