数据属性在动态添加时不以所需的格式呈现，不转义双引号

Data attribute not rendering in the desired format when added dynamically ,not escaping double quotes

本文关键字：转义 格式 添加 动态 数据属性      更新时间：2023-09-26

我尝试使用某些数据属性动态添加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}'>

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

$('<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')

您需要转义引号：

$('<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')
相关文章：