如何通过jQuery选择使用javascript动态生成的innerHTML元素[重复]

Posted 2023-05-07

【中文标题】如何通过jQuery选择使用javascript动态生成的innerHTML元素[重复]

【英文标题】：How to select via jQuery an innerHTML element generated dynamically with javascript [duplicate]

【发布时间】：2018-12-10 14:41:07

【问题描述】：

这是我的问题。 我需要使用 switch 函数生成动态不同的表单。 表单逐步显示，通过无线电输入提出几个问题，并为 anwser 提供一个值。

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 函数来呈现不同的形式。 这就是我需要帮助的原因。

【问题讨论】：

尝试创建所有表单并隐藏它们，显示符合条件的表单。不要从 javascript 附加动态表单。这让生活和编码变得更轻松。

您是在读取表单值并在表单可见时提交，还是尝试将值存储在某个变量中，然后在最后一步提交所有这些值？

非常感谢您的帮助

【参考方案1】：

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

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

更多信息here。

【讨论】：

我建议使用尽可能小的容器，它通常是动态添加元素的容器，而不是document。但是，如果您不确定动态元素在 DOM 中的位置，document 是一个很好的故障保护。

非常感谢您的帮助，这正是我想要的。

这个问题是重复的，因为我缺乏英语词汇。我专注于我的问题，关键字没有找到我。当一个人迷失在代码中时，英语不容易阅读。我是新来的，我不知道我是否需要删除我的问题。