Javascript JSON.parse string onclick in-line

Question

我正在使用jquery将HTML附加到ID;具体来说，我在将JSON格式的字符串放入元素的onclick参数时遇到问题。 我故意希望在单击时解析 JSON，并且完全可以接受存在于 DOM 中的 JSON 来完成这项特定工作。

我认为问题与正确转义引号有关(因为Chrome Inspect Elements调试显示每个JSON元素都被视为HTML标签而不是字符串-有关DOM如何解释的屏幕截图，请参阅 https://ibb.co/eHOgq8(

var str = '{"artist":"So and So","title":"Not Relevant"}';
$("#d").append('<ul><li><a onclick="JSON.parse('' + str + '')" title="NA">Link</a></li></ul>')

我尝试使用许多转义机制和引号类型以及一些本机 Javascript 转义，但无处可去。 2小时后，我必须向SO寻求帮助。 提前非常感谢你。

Answer 1

试试这个：

var str = '{"artist":"So and So","title":"Not Relevant"}';
var jsonObj = JSON.parse(str);
$("#d").append('<ul><li><a onclick="alert(JSON.stringify(jsonObj))" title="NA">Link</a></li></ul>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>

Answer 2

不要尝试使用内联属性分配处理程序 - 这和eval一样糟糕，并且正如您所经历的那样，可能会导致转义字符的混淆问题。相反，请改用 Javascript 正确附加处理程序，例如：

var str = '{"artist":"So and So","title":"Not Relevant"}';
$('#div').append('<ul><li><a title="etc">link</a></li></ul>');
$('div a').on('click', () => console.log(JSON.parse(str)));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>