Question

我建立了一个由“输入文本”，“选择选项”和“复选框”字段组成的表单。
在表单的底部，有一个“添加一本书”按钮。如果用户单击该按钮，则所有字段都将在表单下方重复。然后，用户可以单击另一个“添加书籍”按钮，以再次复制下面的所有字段。等等..
我必须说，原始表单的复选框字段与Javascript操作一起起作用。例如，如果单击复选框A，则会出现复选框B。
问题是，单击“添加书”按钮后，重复的字段序列与Javascript控件不交互。

我使用了这段代码：

    <script>
    $("#Button").click(function() {
    $("#add").clone().appendTo("#wrapper");
    });
    </script>

    <div class="form-group col-md-3">
    <a class="btn btn-success" onclick="add()" href="#">
    <i class="fas fa-plus"></i></i> Add a book
    </a>
    </div>

   <div id="wrapper">
   <!-- champs du formulaire -->
   <div class="form-group col-md-12" id="add" style="display:none;">

   <!-- Cote -->    
   <div class="form-row">               
   <div class="form-group col-md-3">
   <label for="exampleInputPassword1">Côte</label>
   <input type="text" class="form-control" id="cote-man" name="cote-man[]">
   </div>
   </div>
   ... And so on

您知道我该怎么做才能复制我的字段并使我的javascript操作也起作用吗？

任何帮助将不胜感激！

更新-
您可以在那个小提琴中看到问题：https://jsfiddle.net/dw25o4uq/1/
如果您单击“文本卫生学”复选框，则会出现另一个复选框。
如果您添加另一本书，然后单击第二个复选框“ Texte hagiographique”，则不会显示任何内容。

Answer 1

请问您能否提供包含HTML和JS的代码的完整示例

但是无论如何，直到您将提供带有复选框的代码完整示例

关于未对DOM注入新元素的复选框动作，这意味着您直接在复选框上添加了复选框事件监听器，但是如果您希望某个元素上的事件监听器将以编程方式注入到DOM树中，您只需要做一些类似以下的事情，即事件委托

$(document).ready(function() {
  //instead of add event directly to your checkbox
  $(CHECKBOX_SELECTOR).on(EVENT_NAME, function() {
    // code will be apply on this event...
  })

  // you just need to do event delegation on the checkbox event instead of the above code you need to do it
  $(document).on(EVENT_NAME, CHECKBOX_SELECTOR, function() {
    // code will be apply on this event...
  })

})

通过保持javascript操作正常工作，来重复表格的字段

1 个答案: