第二个动态添加的输入字段不起作用

Question

在代码中，当我点击添加详细信息按钮时，我会得到#hide_subject_module。 这将附加。在里面，我称之为另一个动态领域。单击加号按钮时，#hide_detail_module不会附加。我想将多个数据保存到Db。有人给我一个建议吗？

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var addField = $("#hide_subject_module");
  var x = 1;
  $("#add_field_button").click(function(e) {
    e.preventDefault();
    if (x <= max_fields) {
      x++;
      document.getElementById('hide_subject_module').style.display = "block";
      $(wrapper).append(addField);
    } else
      alert("Maximum subject fields achieved.")
  });

  $(wrapper).on("click", "#remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

$(document).ready(function() {
  var wrap = $(".input_detail_fields_wrap");
  var add_detail_button = $("#add_detail_button");
  var addDetailField = $("#hide_detail_module");
  var y = 1;
  $(add_detail_button).click(function(u) {
    u.preventDefault(); {
      y++;
      document.getElementById('hide_detail_module').style.display = "block";
      $(wrap).append(addDetailField);
    }
  });

  $(wrap).on("click", "#remove_detail_field", function(u) {
    u.preventDefault();
    $(this).parent('div').remove();
    y--;
  })
});

<button id="add_field_button" class="btn btn-default" onclick="subjectmodule()">Add Module</button>
<div class="input_fields_wrap">

</div>

<div id="hide_subject_module" style="display:none;">
  <div class="input_fields_wrap">
    <%=f ields_for :subject_module do |a| %>
      <div class="col-xs-3">
        <%=a .text_field :module_number, class: "form-control", :placeholder=>"Number", :maxlength => 5 %>
      </div>
      <div class="col-xs-9">
        <%=a .text_field :module_name, class: "form-control", :placeholder=>"Module Name", :maxlength => 25 %>
      </div>
      <% end %>
        <%=f ields_for :module_detail do |b| %>
          <div class="col-xs-3">
            <%=b .text_field :module_detail_number, class: "form-control", :placeholder=>"No", :maxlength => 5 %>
          </div>
          <div class="col-xs-8">
            <%=b .text_field :description, class: "form-control", :placeholder=>"Description", :maxlength => 25 %>
          </div>
          <button id="add_detail_button" class="btn btn-default" onclick="ModuleDetail()"><i class="fa fa-plus"></i>
          </button>
          <br />
          <div class="input_detail_fields_wrap">
          </div>
          <% end %>
  </div>
  <div id="remove_field" align="center">
    <a href="#" class="btn btn-default">Remove</a>
  </div>
</div>

<div id="hide_detail_module" style="display:none;">
  <%=f ields_for :module_detail do |b| %>
    <div class="col-xs-3">
      <%=b .text_field :module_detail_number, class: "form-control", :placeholder=>"No", :maxlength => 5 %>
    </div>
    <div class="col-xs-8">
      <%=b .text_field :description, class: "form-control", :placeholder=>"Description", :maxlength => 25 %>
    </div>
    <a href="#" id="remove_detail_field" class="btn btn-default"><i class="fa fa-minus"></i></a>
    <% end %>
</div>

Answer 1

试

$(add_detail_button).live("click", function(u){
----

 });

jquery .live('click') vs .click()

jQuery .live() vs .on() method for adding a click event after loading dynamic html