弹出正方形空间上的条件形式

Question

我有一个Squarespace网站（此处为https://www.americangardenhouse.com/products/o-sweet-viola页），我正在尝试创建条件表格（在这种情况下，它将位于其他产品表格上）。选择产品变型然后单击“添加到购物车”后，将显示带有两个无线电输入的弹出产品表单。如果选择“是”，我希望显示其他产品表单字段（当前隐藏的CSS），如果“否”，则出现html消息，提示客户单击产品表单“添加到购物车”按钮。

<style>
#textarea-yui_3_17_2_1_1585523845981_190824,
#address-yui_3_17_2_1_1585523845981_456969,
#email-yui_3_17_2_1_1585523845981_459960,
#phone-yui_3_17_2_1_1585523845981_461162 {
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#radio-yui_3_17_2_1_1585593158170_218442 input:radio').click(function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});
</script>

使用代码注入器将CSS加载到页面标题中，并且脚本位于页脚中。 AJAX当前被禁用。

问题是，单击事件在弹出窗口上不起作用。任何帮助将不胜感激。谢谢！

Answer 1

我相信这是一个可以解决的简单JS问题。

您的点击事件无法正常运行，因为未委派。通过页面上的AJAX添加了包含这些按钮的弹出窗口（sqs-modal-lightbox）。

您需要执行以下操作：

$(document).on('click', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});

注意，检查值的更正确方法是使用更改事件并获取input.prop（）

资源：

https://learn.jquery.com/events/event-delegation/https://api.jquery.com/prop/#prop-propertyName

您也可以尝试这样的事情（尚未测试）：

$(document).on('change', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
	const inputValue = $(this).val();

	return inputValue == 'Yes' ?
		$('.form-item').show() :
		$('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
});