javascript - RubyコードでJqueryを介してクリックをトリガーする

原文 javascript jquery html ruby-on-rails ruby

したがって、f.submitをクリックしたときにf.check_boxがトリガーされるようにしています。 jqueryを使用してルビを処理できるかどうかはわかりませんが、基本的に、これはページ上のすべての項目を含むto-doリストのビューです。チェックボックスをクリックしてオフにすると、自動的に送信されます。

f.check_boxf.submitにdivタグを割り当ててトリガーすることができると思いました...これは、私が使用してきたJQueryの最初のビットです。

<h1><%= @list.title %></h1>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <div>

    <h2><% @list.items.each do |item| %></h2>
    <%= item.content %>
      <%= form_for([@list, item]) do |f| %>
      <div id="target">
        <%= f.check_box :complete %>
      </div>
        <div id="handler">
          <%= f.submit %>
          <% end %>
          </div>
    <% end %>
     </div>
    <script>
      jQuery(document).ready(function() {

        jQuery("#target").click(function() {
          jQuery("#handler").click();
      });
     });

    </script>




    <% if policy(@list).update? %>
      <%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
      <% end %>



     <div class="col-md-4">
       <% if policy(Item.new).create? %>
         <%= link_to "New Item", new_list_item_path(@list), class: 'btn btn-success' %>
       <% end %>

       <% if policy(@list).destroy? %>
          <%= link_to "Delete List", @list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
          <% end %>
     </div>
    </div>



    <%= render "items/form" %>




    <!-- 
    new_list_item_path

    /lists/5/items/new
     -->
答え
divonclickイベントを発生させません。フォームを送信するonchangecheckboxメソッドを設定する必要があります。

これはそのためのコードです。
送信ボタンごとに異なるidを設定する必要があります。その後、Jqueryを使用してそのフォームを送信できます。

アイテムIDに従ってフォームを送信するチェックボックスのonchangeメソッドを設定します。

<h1><%= @list.title %></h1>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <div>
<%index=0%>
<h2><% @list.items.each do |item| %></h2>
<%= item.content %>
  <%= form_for([@list, item]) do |f| %>
    <%=f.check_box :complete,{:onchange=> "submit_form("[email protected][index].id.to_s+");"}%>
      <%= f.submit :id=>@list.items[index].id%>
       <%index+=1%>
      <% end %>
<% end %>
 </div>





<% if policy(@list).update? %>
  <%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
  <% end %>



 <div class="col-md-4">
   <% if policy(Item.new).create? %>
     <%= link_to "New Item", new_list_item_path(@list), class: 'btn btn-success' %>
   <% end %>

   <% if policy(@list).destroy? %>
      <%= link_to "Delete List", @list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
      <% end %>
 </div>
</div>



<%= render "items/form" %>



<script>
    function submit_form(id) {
         $('#'+id).click();
    }

</script>
関連記事

javascript - 内部のng-transcludeからのAngularJS親ディレクティブスコープ

javascript - 移行が機能しない

javascript - JavaScriptキャンバスタグとストロークテキストメソッド

javascript - ユーザー入力-JavaScriptノードjs

javascript - Element.prop( 'scrollHeight')は、Angular.jsの異なるリストアイテムに対して同じ値を返します

javascript - サードパーティのWebブラウザーでiOS8アクション拡張機能をホストする方法

javascript - jQueryは、上からクラス名でDIVを選択します

javascript - push.applyを使用して、ノックアウトがJavaScriptオブジェクトとどのように相互作用するかを理解する

javascript - お問い合わせフォームの送信前にキャプチャを入力してくださいPHP&JavaScript

javascript - ドーナツグラフがグラフJsとバックボーンjsでデータを表示しない