0

私はjqueryでRailscastsのビデオを見ていましたが、いくつかのコードに出くわしました。todoリストアプリを作っています。ここに私のjqueryコードがあります:

リスト.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" を持っています。したがって、2 番目のリスト (フォーム) のテキストをクリックすると、最初のフォームが選択されます。どうすればこれを回避できますか? これを行うための特定の「Railsの方法」はありますか? 私を助けてください 。

編集:したがって、問題は、異なるフォームの両方の入力が、このコードを使用してレールによって自動的に作成される同じ id を持っていることです

              <%= f.check_box :completed %>

では、フォーム/入力タグごとに一意のIDを持つように、RailsでIDの作成をオーバーライドするにはどうすればよいですか?

4

1 に答える 1

0

同じページに同じ ID を持つ 2 つのアイテムを配置しないでください。代わりにクラスを使用してください。次に、css セレクターのスコープを設定すると役立つ場合があります。

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

});
于 2013-06-17T13:15:46.310 に答える