选择下拉选项时，仅更改同一div内的图像
我有一个嵌套的表单，您可以在其中添加新的手镯到您的订单。 对于每个手镯，您可以选择一种颜色，然后在选择颜色的选择（下拉列表）旁边有一个带有手镯的图像。
问题是这样的：当我添加一个新的嵌套字段div（新手镯的forms）时，当我在下拉列表中选择一种颜色时，它旁边的图像不会改变。 此外，当我在第一个手镯的下拉列表中选择一种颜色时，所有手镯的图像都会更改为该颜色。
这是我正在使用的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）。
Choose your QBracelet:
谢谢你的帮助！ 我知道这里有很多代码:)
您正在文档加载绑定您的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此处列出了所有回拨事件。 希望这对你有所帮助！
因此，cocoon动态地向页面添加元素。 您的jquery仅绑定到页面上当前的元素。
您应该使用jquery方法。
如果你的部分没有任何视图代码，那就有点难了，但是我们假设我们将form元素作为加载后将出现的父元素。 所以像这样的东西应该做的伎俩：
jQuery(function($) { $("form").on('change', '.bracelet-color-select', function(){ $('.product-still-form').attr('src',$('.bracelet-color-select>option:selected').attr('src')); }); });