Question

我正在尝试使用jQuery在表单中添加新字段。

这是new.html.erb

<%= form_for @hour do |f| %>
  <div id="hourSet">
    <%= render partial: "hours_form" %>
  </div>

  <a href="javascript:;" id="addNewHour">Add Hours</a>

  <div class="hide" id="new_hours_form">
    <%= render partial: "hours_form", locals: {hour: false} %>
  </div>
</div>

js file

$(document).ready ->
  $("#addNewHour").on "click", ->
    $("#hourSet").append $("#new_hours_form").html()

  $("#removeNewHour").on "click", ->
    $("#hourSet").remove()

_hours_form.html.erb

<div class="hoursForm">
  <%= label_tag 'day' %>
  <%= text_field_tag 'day[]' %>
  <%= label_tag 'open_time' %>
  <%= text_field_tag 'open_time[]' %>
  <%= label_tag 'close_time' %>
  <%= text_field_tag 'close_time[]' %>  

  <a href="#" id="removeNewHour">X</a>
</div>

当我尝试填充字段时，只有第一个X工作，并删除所有字段。我喜欢一次只删除1个。什么是添加唯一ID并获取这些ID以便轻松删除的最佳方法？

谢谢！

Answer 1

这是jsfiddle 您可以相应地引用和更改您的代码。我已经使用了最接近jquery的方法来进行移植。如果这很有用，那么我不认为有必要使用独特的ID。

$(this).closest('.hoursForm').remove();

Answer 2

第一个“X”删除链接的工作原因是因为您的javascript在文档就绪时附加了点击事件。在那一刻，你只需要在屏幕上显示第一个“X”。

要解决此问题，您可以使用delegate代替on来附加活动。而且您不需要为每个X链接分配id。你的JS看起来像这样：

$(document).ready ->
  // Keep the same here
  $("#addNewHour").on "click", ->
    $("#hourSet").append $("#new_hours_form").html()

  // This code below handles the click on the delete link ("X")
  $('.hoursForm').delegate "a", "click", ->
    $(this).parent().remove()

希望有效。

Answer 3

尝试更改js

$(document).ready(function(){
  $("#addNewHour").click(function(e){
    e.preventDefault();
    $("#hourSet").append($("#new_hours_form").html());
  });
});

var removeHours = function(elem){
       $(elem).parent().remove();
};

并更改#removeNewHour中的html - ＆gt;添加属性onclick="removeHours(this); return false;"

Rails：jQuery在表单中添加和删除字段

3 个答案: