javascript - 动态添加时数据属性未以所需格式呈现，未转义双引号

Question

我试图用一些数据属性动态添加一个 div 标签，但数据属性没有以正确的格式呈现。请在下面找到代码

$('<a href="#" id="opendialog2" data-role="button">Open Dialog2</a><div id="inlinecontent2" style="display:none" data-options="{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}"><ul data-role="listview"><li>Some</li><li>List</li><li>Items</li></ul><a rel="close" data-role="button" href="#">Close</a></div>').appendTo('#myDiv')

div inlinecontent2 呈现为

<div mode":"blank","headertext":"yo","headerclose":true,"blankcontent":true}"="" data-options="{" style="display: none;" id="inlinecontent2">

数据选项属性呈现所有混乱

我希望得到它呈现如下

<div id="inlinecontent" style="display:none" data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

Answer 1

您需要转义引号：

$('<a href="#" id="opendialog2" data-role="button">Open Dialog2</a><div id="inlinecontent2" style="display:none" data-options="{\"mode\":\"blank\",\"headerText\":\"Yo\",\"headerClose\":true,\"blankContent\":true}"><ul data-role="listview"><li>Some</li><li>List</li><li>Items</li></ul><a rel="close" data-role="button" href="#">Close</a></div>').appendTo('#myDiv')

Answer 2

您需要转义引号（不同）：

$('<a href="#" id="opendialog2" data-role="button">Open Dialog2</a><div id="inlinecontent2" style="display:none" data-options=\'{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}\'><ul data-role="listview"><li>Some</li><li>List</li><li>Items</li></ul><a rel="close" data-role="button" href="#">Close</a></div>').appendTo('#myDiv')