为什么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){