なぜjQueryは一部のリンクでのみ関数を入力しますか？

Question

jQueryとJavaScriptが比較的新しいので、私はこの問題を抱えています。

私はRails 4で布を販売するための電子商取引のページを作成していますので、私はフォームとそのすべてを表示するという形で以前よりも重視しています。そのため、フォームを非表示にしてjQuery経由で値を設定しました。

問題は二つの部分に分けることができます。

• は、問題の最初の部分は、ユーザーが自分のカートに布を追加布の＃ショーである：

  フォーム：

  <%= form_for @order_item, remote: true do |f| %> 
       <h5>Select a size</h5> 
       <div class="input-sizes"> 
        <% @sis.each do |si| %> 
         <%= link_to si.size.letter, "#{si.size_id}", class:"normal-size" %> 
        <% end %> 
       </div> 
       <%= f.hidden_field :size_id, id: "size-input" %> 
       <h5>Select a color</h5> 
       <div class="input-colors"> 
        <% @cos.each do |co| %> 
         <%= link_to "#{co.color_id}", id: "link-circle" do %> 
          <div id="circle" style="background: <%= co.color.hex %>"> 
           <div id="mini-circle"></div> 
          </div> 
         <% end %> 
        <% end %> 
       </div> 
       <%= f.hidden_field :color_id, id: "color-input" %> 
  
       ... 
  
  <% end %> 
  

  のjQuery：

  //Select size 
  $('a.normal-size').on('click', function(e){ 
      e.preventDefault(); 
      var value = $(this).attr("href"); 
      $('#size-input').val(value); 
      $(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size"); 
  }); 
  
  //Select Color 
  $('#link-circle').on('click',function(e){ 
      e.preventDefault(); 
      var value = $(this).attr("href"); 
      $('#color-input').val(value); 
      $(this).children().children().css('opacity', '1'); 
      return false; 
  }); 
  

  サイズ入力のセットは完全に機能しますが、ユーザーが最初の色を選択できるのは色入力ですが、ユーザーが2番目の色を選択したい場合はjQuery関数が呼び出されないためです。リンク（私はe.preventDefault()とreturn falseを同時に書いてみました）。

• 問題の2番目の部分は、ユーザーがすべての布のサマリーを見ることができるときに表示されます。ここでは、布、説明、選択された色、選択されたサイズと価格の画像を見ることができます。色とサイズのセクションはユーザーのために作られていますので、彼が心を変えて別のサイズや色を選択すると、彼は布を編集できます。ここの問題は、サイズと色の両方であり、理由はわかりません。カラーセクションでは上記とまったく同じことが起こりますが、サイズセクションでは、彼が別のクールを作成するとjQuery関数が呼び出されないため、クリックを1回しか行うことができません。クリックは一度だけ動作するかのようである：

  フォーム：

  <%= form_for (order_item), remote: true,:url => "/order_items/#{order_item.id}", :html=>{:id=>'item_form_cart'} do |f| %> 
      <div class="input-colors col-md-1"> 
       <% @cos.each do |co| %> 
        <% if co.cloth == order_item.cloth %> 
         <% if co.color_id == order_item.color_id %> 
          <%= link_to "#{co.color_id}", id: "link-circle" do %> 
           <div id="circle" style="background: <%= co.color.hex %>;"> 
            <div id="mini-circle" style="opacity: 1;"></div> 
           </div> 
          <% end %> 
         <% else %> 
          <%= link_to "#{co.color_id}", id: "link-circle" do %> 
           <div id="circle" style="background: <%= co.color.hex %>;"> 
            <div id="mini-circle"></div> 
           </div> 
          <% end %> 
         <% end %> 
        <% end %> 
       <% end %> 
      </div> 
      <%= f.hidden_field :color_id, id: "color-input" %> 
      <div class="input-sizes col-md-2"> 
       <% @sis.each do |si| %> 
       <% if si.cloth == order_item.cloth %> 
        <% if order_item.size_id == si.size_id %> 
         <%= link_to si.size.letter, "#{si.size_id}", class:"selected" %> 
        <% else %> 
         <%= link_to si.size.letter, "#{si.size_id}", class:"normal-size cart-el" %> 
        <% end %> 
       <% end %> 
       <% end %> 
      </div> 
      <%= f.hidden_field :size_id, id: "size-input-cart" %> 
  
      ... 
  
  <% end %> 
  

  はjQueryの：

  //Select size 
  $('a.normal-size.cart-el').on('click',function(e){ 
      e.preventDefault(); 
      var value = $(this).attr("href"); 
      $(this).parent().next('#size-input-cart').val(value); 
      $(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size"); 
      $(this).closest('#item_form_cart').submit(); 
  }); 
  

  ここでは、私は知りませんでしたので、私は唯一のサイズを機能させます色を修正するには、これもバグがあり、初めて呼び出されるだけです。これは、どの布のサイズを選択しても、e.i.最初の布のサイズを変更しても同じ布のサイズを変更したり、別の布のサイズを変更したい場合は、jQuery関数が呼び出されません。

お手数ですが、 ありがとうございます。

編集：

が、私は第二の問題が起こっている理由についての詳細を調査していると私は、ユーザーがサイズや色を変更した場合、私の形でそれはによって行われますので、それは、アヤックスに関連させることができることを見ましたアヤックス、我々はhereを見ることができます。私は、第二の溶液をしようとしたが、それはうまくいきませんでした：

<div class="order_items"> 
    <% @order_items.each do |order_item| %> 
    <div class = "well"> 
     <%= render 'carts/cart_row', cloth: order_item.cloth, order_item: order_item, show_total: true %> 
    </div> 
    <% end %> 
</div> 

Answer 1

あなたの選択色機能はID「リンクサークル」に添付されています

$('.well').on('click','a.normal-size.cart-el',function(e){ 
    e.preventDefault(); 
    var value = $(this).attr("href"); 
    $(this).parent().next('#size-input-cart').val(value); 
    $(this).removeClass("normal-size").addClass("selected").siblings().removeClass("selected").addClass("normal-size"); 
    $(this).closest('#item_form_cart').submit(); 
}); 

$('.well').on('click','.link-circle.cart-el',function(e){ 
    e.preventDefault(); 
    var value = $(this).attr("href"); 
    $(this).parent().next('#color-input-cart').val(value); 
    $(this).siblings().children().children().css('opacity', '0'); 
    $(this).children().children().css('opacity', '1'); 
    $(this).closest('#item_form_cart').submit(); 
}); 

そして、ここでは、ビュー内の各アイテムをレンダリングです。潜在的に同じIDを持つ複数の要素をレンダリングしているようです。サイズの選択機能は、複数の要素に含めることができるクラスに基づいています。ただし、複数の要素に同じIDを持つことはできません（w3）。私はこれを推測idとクラスの違いを知らなかった、

$('.link-circle').on('click',function(e){