Question

我正在浏览关于jquery的Railscasts视频并遇到了一些代码。我正在做一个待办事项列表应用程序。这是我的jquery代码：

lists.js

$(function () {
 $('.edit_task input[type=submit]').remove();
 $('.edit_task  input[type=checkbox]').click(function () {
   console.log(this);
  });
});

我有一个list / show.html.erb文件：

<h3>Unfinished Tasks</h3>
<div class="tasks" id="incomplete_tasks">
  <% @list.tasks.incomplete.each do |task| %>
      <%= form_for [current_user, @list, task], remote: true do |f| %>
          <%= f.label :completed, class: 'checkbox' do %>
          <%= f.check_box :completed %>
          <%= task.description %>
      <% end %>
      <%= f.submit "Update" %>        <!--We hide this button in jquery-->
  <% end %>
  <% end %>
</div>
<h3>Finished Tasks</h3>
<div class="tasks" id="completed_tasks">
  <% @list.tasks.completed.each do |task| %>
      <%= form_for [current_user, @list, task], remote: true do |f| %>
         <%= f.label :completed, class: 'checkbox' do %>
          <%= f.check_box :completed %>
          <%= task.description %>
      <% end %>
      <%= f.submit "Update" %>        <!--We hide this button in jquery-->
  <% end %>
  <% end %>
</div>

因此，这会生成以下html代码。：

<div class="tasks" id="incomplete_tasks">
  <form accept-charset="UTF-8" action="/users/4/lists/12/tasks/23" class="edit_task"     data-remote="true" id="edit_task_23" method="post">
      <label class="checkbox" for="task_completed">
          <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />
          Read for exam
     </label> 
     <input name="commit" type="submit" value="Update" />        <!--We hide this button in jquery-->
 </form>
   <form accept-charset="UTF-8" action="/users/4/lists/12/tasks/24" class="edit_task"     data-remote="true" id="edit_task_24" method="post">
      <label class="checkbox" for="task_completed">
          <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />
          Eat healthy food
     </label> 
     <input name="commit" type="submit" value="Update" />        <!--We hide this button in jquery-->
  </form>

如果你注意到，你会看到

 <input name="task[completed]" type="hidden" value="0" /><input id="task_completed" name="task[completed]" type="checkbox" value="1" />

两个表单的

具有相同的id =“task_completed”。因此，当我单击第二个列表（表单）中的文本时，第一个表单将被选中。我该如何解决这个问题？是否有某种“Rails方式”来做到这一点？请帮帮我。

编辑：所以问题是不同形式的输入都具有相同的id，这是由rails使用此代码自动创建的

              <%= f.check_box :completed %>

那么，我如何覆盖rails中的id创建，以便每个表单/输入标记都有唯一的id？

Answer 1

您不应该在同一页面上有两个具有相同ID的项目，而是使用类。其次，您可能会发现您的css选择器可能有所帮助。

$("#incomplete_tasks .task_completed").click(function(){

});

在Rails中使用标签标记时出错

1 个答案: