Javascript JSON.parse 字符串 onclick 内联

Question

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

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

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小时后，我不得不求助。非常感谢您。

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>