如何获取动态生成的问卷选项按钮的点击名称？

嘿，我看你在处理AMPScript动态生成的问卷按钮时，没法正确捕获用户点击的按钮名称，这问题我之前也碰到过，核心问题出在事件绑定的方式和点击元素的获取逻辑上，咱们来一步步修正：

问题出在哪？ #

你原来的btnAnswer()函数里用$('.slide :button[clicked]')来找点击的按钮，但浏览器根本不会给点击的按钮自动加clicked属性，所以这个选择器根本找不到任何元素，自然拿不到按钮的name和value。另外，动态生成的元素（比如你用AMPScript循环出来的选项按钮），直接绑定点击事件容易失效，得用事件委托才行。

修正后的完整方案 #

1. 重写JS点击事件逻辑 #

把原来的函数换成事件委托的形式，直接在点击时获取当前触发的按钮：

// 用事件委托给所有动态生成的.btnAnswer按钮绑定点击事件
$(document).on('click', '.btnAnswer', function() {
  // $(this)就是当前被用户点击的那个按钮，准没错
  var btnClicked = $(this);
  var btnValue = btnClicked.val();
  var btnName = btnClicked.attr("name");
  
  // 解析题号和选项号，你的原逻辑是对的，直接保留
  var btnQuestion = btnName.substring(0, btnName.indexOf('A'));
  btnQuestion = btnQuestion.substring(btnQuestion.indexOf('Q') + 1);
  var btnAnswer = btnName.substring(btnName.indexOf('A') + 1);
  
  // 调用你的计分函数
  updateScore(btnQuestion, btnAnswer);
  
  // 顺便给你加个提示显示的逻辑（可选），对应你HTML里的正确/错误提示
  var currentSlide = btnClicked.closest('.slide');
  var correctAnswer = currentSlide.find('[name="crctAnswer"]').val();
  
  // 先隐藏所有提示，再显示对应结果
  currentSlide.find('.answer-title, .answer-explaination').hide();
  if (btnAnswer === correctAnswer) {
    currentSlide.find('.answer-h4-correct').closest('.answer-title').show();
  } else {
    currentSlide.find('.answer-h4-incorrect').closest('.answer-title').show();
  }
  currentSlide.find('.answer-explaination').show();
});

2. HTML部分的小提醒 #

你的AMPScript生成的HTML结构没问题，注意两点：

• 动态生成的按钮已经带了btnAnswer类，刚好用来做事件委托的选择器，不用改
• 隐藏的crctAnswer输入框放在当前题目.slide下面，这样用closest('.slide')就能精准找到对应题目的正确答案，不会和其他题目混淆

为什么原来的代码失效？ #

1. 事件绑定问题：页面加载后才动态生成的按钮，直接用$('.btnAnswer').click()绑定事件是无效的，因为绑定的时候这些元素还不存在，事件委托是把事件绑定在父元素（这里用document）上，不管元素什么时候生成都能触发
2. 元素定位错误：[clicked]属性不是浏览器默认的点击标识，没有任何元素会自动带上这个属性，所以根本找不到点击的按钮，必须用事件回调里的this来获取当前点击的元素

测试建议 #

1. 替换原来的JS代码为上面的版本
2. 在updateScore函数里加一句console.log(btnQuestion, btnAnswer)，打开浏览器控制台，点击选项看看能不能正确输出题号和选项号
3. 测试不同题目，确认提示显示是否正常

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