将下拉菜单转为单选按钮后，change事件触发无效致商品图片不更新

问题场景 #

已实现单选按钮选中时同步修改下拉菜单的取值，但商品图片未按预期更新——只有直接操作原下拉菜单选择选项时，图片才会正常切换。当前使用的代码如下：

<script>
$(".variant-option select").each(function() {
  var select = $(this);
  var selectName = select.attr("name");

  // Create a container for the radio buttons
  var radioContainer = $("<div class='radio-container'></div>");

  select.find("option").each(function(i, e) {
    var optionValue = $(this).val();
    var optionText = $(this).text();

    // Create a radio button for each option
    $("<input type='radio' name='" + selectName + "' />")
    .attr("value", optionValue)
    .attr("id", selectName + "_" + i) // Add an ID for the label
    .attr("checked", i == 0)
    .click(function() {
        // Update the select element's value
        select.val(optionValue);

        // Trigger the change event on the select element
        select.trigger('change'); 
      })
    .appendTo(radioContainer);

    // Create a label for the radio button
    $("<label for='" + selectName + "_" + i + "'>" + optionText + "</label>")
    .appendTo(radioContainer);
  });

  // Add the radio buttons after the select element
  radioContainer.insertAfter(select);
});
</script>

问题原因 #

Squarespace的商品变体图片切换逻辑，依赖原生DOM的change事件监听器。jQuery的trigger('change')仅能触发通过jQuery绑定的事件回调，无法完全模拟用户手动操作时触发的原生事件流，导致图片更新的关联逻辑没有被触发。

解决方案 #

将jQuery的事件触发方式替换为原生DOM事件触发，确保所有关联的监听器都能被正确激活。修改后的代码如下：

<script>
$(".variant-option select").each(function() {
  var select = $(this);
  var selectName = select.attr("name");

  // Create a container for the radio buttons
  var radioContainer = $("<div class='radio-container'></div>");

  select.find("option").each(function(i, e) {
    var optionValue = $(this).val();
    var optionText = $(this).text();

    // Create a radio button for each option
    $("<input type='radio' name='" + selectName + "' />")
    .attr("value", optionValue)
    .attr("id", selectName + "_" + i) // Add an ID for the label
    .attr("checked", i == 0)
    .click(function() {
        // Update the select element's value
        select.val(optionValue);

        // 触发原生DOM change事件，确保所有监听器响应
        select[0].dispatchEvent(new Event('change', { bubbles: true }));
      })
    .appendTo(radioContainer);

    // Create a label for the radio button
    $("<label for='" + selectName + "_" + i + "'>" + optionText + "</label>")
    .appendTo(radioContainer);
  });

  // Add the radio buttons after the select element
  radioContainer.insertAfter(select);
});
</script>

关键修改点 #

• 将select.trigger('change')替换为select[0].dispatchEvent(new Event('change', { bubbles: true }))
• 原生Event的bubbles: true参数确保事件像用户手动操作一样向上冒泡，触发Squarespace内部绑定的所有变体切换逻辑

内容的提问来源于stack exchange，提问作者George Bleasdale