1

我有一个嵌套表格，您可以在其中将新手镯添加到您的订单中。对于每个手镯，您可以选择一种颜色，在您选择颜色的选择（下拉菜单）旁边有一个带有该颜色手镯的图像。

问题是这样的：当我添加一个新的嵌套字段 div（新手镯的表单）时，当我在下拉列表中选择一种颜色时，它旁边的图像不会改变。此外，当我在下拉列表中为第一个手镯选择一种颜色时，所有手镯的图像都会变为该颜色。

这是我正在使用的 JQuery，其中 .product-still-form 是图像。

jQuery(function($) {
  $(".bracelet-color-select").change(function(){
    $('.product-still-form').attr('src',$('.bracelet-color-select>option:selected').attr('src'));
  });
});

这是我的表单（它使用 Rails 和 Simple_Form，加上嵌套部分的 Cocoon）。

<div class="nested-fields">
<p style="text-align: left;">Choose your QBracelet:</p>
<div class="row">
    <div class="col-sm-8 col-xs-12 form-fix-space-left">

      <div class="form-group form-input selected">
            <%= f.input :color, collection: [["Polished Silver", "Polished Silver", { src: (asset_path 'product-bracelet-polished-silver.png') }], ["Matte Silver", "Matte Silver", { src: (asset_path 'product-bracelet-matte-silver.png') }], ["Brushed Black", "Brushed Black", { src: (asset_path 'product-bracelet-brushed-black.png') }], ["Matte Black", "Matte Black", { src: (asset_path 'product-bracelet-matte-black.png') }], ["Polished Gold", "Polished Gold", { src: (asset_path 'product-bracelet-polished-gold.png') }]], 
                                                    include_blank: "Color", label: false, input_html: { class: 'bracelet-color-select' } %>         
        </div>
        <div class="form-group form-input">
            <%= f.input :size, collection: ["Small", "Medium", "Large"], include_blank: "Size", label: false %>
        </div>
        <div class="form-group form-input">
            <%= f.input :kind, collection: [['Lightning Connector (iPhone 5 and newer)', 'Lightning'], ["Micro USB (Android + Windows phones)",'Micro-USB']], include_blank: "Charger Type", label: false %>
        </div>
</div>
    <div class="col-sm-4 form-fix-space-right hidden-xs">
        <%= image_tag "product-bracelet-matte-silver.png", class: "product-still-form"%>
    </div>  


<%= link_to_remove_association "Remove Bracelet", f, class: "demon-link contact-us" %>
</div>

谢谢你的帮助！我知道这里有很多代码:)

4

2 回答 2

1

您在文档加载时绑定您的 javascript。这就是为什么会发生这种情况。您需要将其绑定到动态创建的元素上。Cocoon 提供了在动态生成的元素上绑定 javascript 的方法。

$('#container').on('cocoon:after-insert', function(e, insertedItem) {
  // ... do something
});

https://github.com/nathanvda/cocoon#callbacks-upon-insert-and-remove-of-items这里列出了所有回调事件。希望这对你有帮助！

于 2014-08-14T06:47:48.077 回答
0

因此，cocoon 会动态地将元素添加到页面中。您的 jquery 仅绑定到页面上当前的元素。

您应该使用 jquery on方法。

如果没有您的任何视图代码，这有点困难，但是让我们说我们将form元素作为加载后将出现的父元素。所以这样的事情应该可以解决问题：

jQuery(function($) {
  $("form").on('change', '.bracelet-color-select', function(){
    $('.product-still-form').attr('src',$('.bracelet-color-select>option:selected').attr('src'));
  });
});
于 2014-08-15T14:46:59.080 回答