为什么jQuery只在某些链接中输入函数

我对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 %>
  

  j查询：

  //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 %>
  

  j查询：

  //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 函数不会被调用。

希望你能帮助我，提前谢谢。

编辑：

我已经调查了更多关于为什么会发生第二个问题，我看到它可能与 Ajax 有关，因为在我的表单中，如果用户更改大小或颜色，它就会由 Ajax 完成，正如我们在这里看到的。我尝试了第二种解决方案，但没有奏效：

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