javascript - HTML+JavaScript : Can't add multiple parameters to onclick despite using escaped quotes

Question

我试图在 onclick 函数中附加一个带有多个参数的 HTML div。即使我使用转义引号，HTML 也无法正确呈现。

这是我的 HTML:

$("#city-list").append("<div class='user-panel' id='" + user.id + 'onclick=\'openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "\'\")><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");

这是渲染的:

<div class="user-panel" id="A61o-ko0zVVJaxTbAAAHonclick=" openchat('a61o-ko0zvvjaxtbaaah','adamlee','male'")=""><b>adamlee, (male, 17)</b></div>

Answer 1

您错过了 id 属性的结束引号，并且 onclick 中的函数应该有双引号，因为其中使用了单引号。

const user ={id: 'a61o-ko0zvvjaxtbaaah', username: 'henryzhu', sex: 'male', age: 17 }

$("#city-list").append("<div class='user-panel' id='" + user.id + '\' onclick="openChat(\'' + user.id + '\',\'' + user.username + '\',\'' + user.sex + "')\"><b>" + user.username + ", " + "(" + user.sex + ", " + user.age + ")</div>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="city-list"></div>