javascript - 记录时与附加到元素时返回不同值的 HTML 字符串
问题描述
我正在尝试动态生成包含 HTML 的字符串,然后将它们附加到文档中。当我console.log
输入字符串时,值会完全按照我的预期显示。但是当我将它附加到 HTML 文档时,它会以某种方式发生变化。
for (var i=0; i < roster.length; i++) {
if (roster[i].attended === 1) {
var attendedSVG = 'user-check.svg';
}
else {
var attendedSVG = 'user-x.svg';
}
var _fkUserID = roster[i]._fkUserID;
var firstName = roster[i].firstName;
var lastName = roster[i].lastName;
var cancelJSFunction = "cancelRequest('"+_fkUserID+"', '"+firstName+"', '"+lastName+"', '"+day+"', '"+time+"');";
console.log(cancelJSFunction);
/* Returns: "cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')" */
var html = "<div class='user'><img class='cx' src='x-square.svg' onClick='"+cancelJSFunction+"'></img>"+firstName+' '+lastName+"<img class='attended' src='"+attendedSVG+"'></img></div>";
$("#roster-container").append(html);
/* Appends:
<img class="cx" src="x-square.svg" onclick="cancelRequest(" userID',="" 'firstName',="" 'lastName',="" 'day',="" 'time')'="">
*/
}
为什么记录的内容和附加的内容是两个完全不同的字符串,其中添加了所有 =""?
解决方案
您呈现的 HTML 看起来像这样
<div class='user'>
<img class='cx' src='x-square.svg' onClick='cancelRequest('userID', 'firstName', 'lastName', 'day', 'time')'></img>
Jane Doe
<img class='attended' src='xxxx'></img>
</div>
您的 onClick 仅包含cancelRequest(
,其余部分已损坏。这就是使用事件属性的危险。您应该始终绑定您的事件以避免此类问题(并允许您绑定多个事件)。看起来您正在使用 jQuery,因此您可以使用它来简化事件绑定。例如
function cancelRequest(_fkUserID, firstName, lastName, day, time) {
console.log("Canceling: ", _fkUserID, firstName, lastName, day, time);
}
var _fkUserID = 1, firstName = "Jane", lastName = "Doe", day = 2, time = 3;
var cancelJSFunction = function () {
cancelRequest(_fkUserID, firstName, lastName, day, time);
};
var newElements = $("<div class='user'><img class='cx' src='x-square.svg'></img>"+firstName+' '+lastName+"<img class='attended' src='attendedSVG'></img></div>");
$("#roster-container").append(newElements);
newElements.find(".cx").click(cancelJSFunction);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="roster-container"></div>
推荐阅读
- python - Nginx 单元需要使用端口 80 进行初始设置?
- python - 将预训练的 PyTorch 模型部署到 sagemaker 时出错
- java - 为什么在 Java 中使用 int 而不是 Integer(或其他方式)?
- javascript - React Native Android Build 语义分析时出现一般错误:Unsupported class file major version 60
- flutter - 关于导航到新屏幕的颤振问题
- android - 当我迁移到 AndroidX 时,我收到 java.lang.RuntimeException: Unable to start activity ComponentInfo
- python - 如何测量基于RMSE的时间序列模型的准确性?
- css - Tailwindcss 边距在 docker 内不起作用,但在容器外完美工作
- r - 如何在 dplyr 中调用第 n 个下一个值?
- ruby-on-rails - 在 Amazon Linux 2 中通过 Gemfile 安装 Gem 包失败