Change only the image inside same div when option from dropdown is chosen

Question

I have a nested form where you can add new bracelets to your order. For each bracelet you can choose a color, and next to the select (dropdown) where you choose the color there is an image with the bracelet on that color.

The problem is this: When I add a new nested-fields div (form for new bracelet), when I select a color in the dropdown the image next to it doesn't change. Also, when I select a color in the dropdown for the first bracelet, the images for all the bracelets change to that color.

This is the JQuery I'm using, where .product-still-form is the image.

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

This is my form (it uses Rails and Simple_Form, plus Cocoon for the nested part).

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

Thanks for any help! I know there is a lot of code here :)

Answer 1

You are binding your javascript on document load. That's why this happening. You need to bind it on element created dynamically. Cocoon provide way to bind javascript on dynamic generated elements.

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

https://github.com/nathanvda/cocoon#callbacks-upon-insert-and-remove-of-items here list of all the call back events. Hope this help you!

Answer 2

So, cocoon dynamically adds elements to the page. Your jquery only binds to elements currently on the page.

You should use the jquery on method.

Without any view code from your part it is a bit hard, but let us say we take the form element as the parent element which will be present after loading. So something like this should do the trick:

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