Question

因此，我试图通过单击“添加”按钮动态地（使用javascript）在表单中添加输入字段。语义ui下拉式CSS样式为第一个字段，因为它没有与javascript一起添加。但是，在按添加之后，将不应用由CSS样式创建的新字段。

这是演示的链接。

https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya

这是我的代码

   <!DOCTYPE html>
<html>
  <head>
    <title>TOPS</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <body>

    <div class="ui text container" style="margin-top: 20%">

  <form action="" class="ui form">
    <div class="field" id="timekeyword">
      <label>Segment Start Time/Keywords</label>
      <div class="ui action input">
        <input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
          <option value="Absolute">Absolute</option>
          <option value="Absolute Two">Absolute Two</option>
        </select>
        <div class="ui positive button" id="addField">Add</div>
      </div>
    </div>
  </form>
</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
        <script >

      $('.dropdown').dropdown();

    $('#addField').click(function(){
        var html = "<div class=\"field\">" +
            "         <div class=\"ui action input\">" +
            " <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
            "<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
            "<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
            "<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
       "         </div>" +
            "       </div>"
        $('#timekeyword').after(html)
    })

      </script>

  </body>
</html>

Answer 1

提琴：https://jsfiddle.net/8pcfz2a7/

您还应该调用$('.dropdown').dropdown();来获取新元素。

因此，在点击处理程序的末尾添加$('.dropdown').dropdown();。

您也可以将其放在一个名为update_ui的函数中，以重用代码。

与javascript一起添加时未应用下拉样式

1 个答案: