单选按钮更改事件未触发

Question

我有这个 html，它是根据我们数据库中的数据动态创建的。我正在尝试创建一个向导，以便当用户单击单选按钮时，我使用 ajax 调用 Web 服务，并创建另一个单选按钮列表供用户选择。初始页面加载工作正常，但是当我创建动态单选按钮列表时，我在触发事件时遇到问题。我是否必须重新加载文档或特定的 div 才能使其工作？

我想在选择这些单选按钮之一时捕获“更改”事件。下面的 jQuery 没有捕获事件。关于我做错了什么的任何建议？

HTML：

<input name="productModel" id="Basic-jacketCustom" type="radio" value="Basic jacket"><label for="Basic-jacketCustom">Basic jacket</label>
<input name="productModel" id="Platinum-jacketCustom" type="radio" value="Platinum jacket"><label for="Platinum-jacketCustom">Platinum jacket</label>
<input name="productModel" id="Platinum-Pro-jacketCustom" type="radio" value="Platinum Pro jacket"><label for="Platinum-Pro-jacketCustom">Platinum Pro jacket</label>
<input name="productModel" id="Riding-jacketCustom" type="radio" value="Riding jacket"><label for="Riding-jacketCustom">Riding jacket</label>

jQuery:

$('input[name="productModel"]').change(function() {    alert("Event
 Fires"); });

Answer 1

“动态创建”是什么意思？您是否在页面加载后将输入推送到 dom？如果是，您必须使用Event Delegation。试试下面的例子：

$('body').on('change', 'input[name="productModel"]', function() {
  alert("Event Fires");
});