爲什麼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; 
  }); 
  

  大小輸入的設置完美地工作，但在顏色輸入中，用戶只能選擇第一種顏色，因爲如果用戶想要選擇第二種顏色，jQuery函數不會被調用，因此它會轉到鏈接（我試着同時寫e.preventDefault()和return false）。

• 問題的第二部分出現在購物車＃show中，用戶可以看到他所有布料的摘要。在這裏它顯示了一張桌子，每一排都是布，用戶可以看到布的圖像，描述，選定的顏色，選定的尺寸和價格。顏色和尺寸部分是爲用戶製作的，所以如果他改變主意並選擇其他尺寸或顏色，他可以編輯他的布料。這裏的問題在於大小和顏色，我不知道爲什麼。在顏色部分發生完全一樣的上面，但在大小部分，他只能做一個點擊，因爲如果他讓另一個jQuery函數不會被調用。就像如果點擊只能使用一次：

  表：

  <%= 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(); 
  }); 
  

  在這裏我只能讓大小功能，因爲我不知道怎麼樣修正顏色，但這也有一個錯誤，只有第一次被調用。無論您選擇哪種布尺寸，都會發生這種情況。如果我更改第一塊布料的尺寸效果不錯，但如果我想再次更改相同布料的尺寸或更改另一塊布料的尺寸，則不會調用jQuery函數。

希望你能幫助我， 在此先感謝。

編輯：

我已經調查瞭解爲什麼發生的第二個問題，我看到了，它可以如果用戶更改大小或顏色它就會通過做涉及到阿賈克斯，因爲在我的表格阿賈克斯，我們可以看到here。我想第二個解決方案，但它沒有工作：

$('.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(); 
}); 

這裏是在視圖中繪製的每個項目：

<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「鏈接圈」。它看起來像你可能使用相同的ID呈現多個元素。您的選擇尺寸功能基於您可以在多個元素上使用的類。然而，根據w3，您不能在多個元素上使用相同的ID。嘗試改變「鏈接圈」像這樣一類..

<%= link_to "#{co.color_id}", class: "link-circle" do %> 

和你的選擇來..

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