javascript - 如何通过 jQuery 选择使用 javascript 动态生成的innerHTML 元素

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

这是我的问题。我需要使用 switch 函数动态生成不同的表单。表单将逐步显示，通过 radio 输入提出几个问题，并提供答案值。

function myFunctionSwitch() {
switch(myVarValue) {
case "something":
text = "<div id=\"q1\">Question
<label>Answer<input class=\"reponse\" type=\"radio\" name=\"q1\" id=\"q1r1\" value=\"462\">
<span class=\"checkmark\">
</span>
</label>
<label><input class=\"reponse\" type=\"radio\"... 
<label><input class=\"reponse\" type=\"radio\"... 
<label><input class=\"reponse\" type=\"radio\"... 
</div>"
break;
 default:...
}
document.getElementById("myModalInside").innerHTML = text;

我尝试通过这种方式使用 jQuery 获取输入值:

$(document).ready(function(){   "use strict";
var result;
var value1;

$('#q1 .reponse').on('change', function(){  
    value1 = parseInt(this.value);
    result = value1 + ...;
});

这段 jQuery 代码在带有表单写入的 html 页面中完成了正确的工作。但我需要我的 switch 函数来呈现不同的形式。这就是我需要帮助的原因。

Answer 1

如果您想处理动态添加的元素上的事件，您需要以这种方式委托(delegate)事件:

$(document).on('change', '#q1 .reponse' , function() {
    value1 = parseInt(this.value);
    result = value1 + ...;
});

更多信息here .