jquery - 如何在 HTML 数据属性中存储带有值的 JSON 作为句子？

Question

问题:在数据属性中存储值超过一个字的 JSON 响应会导致问题。它忽略花括号后的文本作为数据属性中的值。有时它也会忽略空格字符后的文本。它将剩余的文本视为一个属性。 当我获得数据操作的值时，它仅显示“{”。

示例代码 看起来像这样。

var responseString = [{
                      "key1": "Let's go"
                    },{
                      "key2": "new text"
                    }];
$.each(responseString, function(index, value) {
    childDiv += '<div data-action="' + JSON.stringify(value) + '">CONTENT</div>';
})

$(body).append(childDiv);

Answer 1

因为字符串上有 '，所以在连接之前必须对字符串进行转义。

如果您正在使用数据，则可以使用 unescape。单击该元素以获取 data 值。

请看下面的例子:

$(document).ready(function() {
  var responseString = [{
    "key1": "Let's go"
  }, {
    "key2": "new text"
  }];
  var childDiv = "";
  $.each(responseString, function(index, value) {
    childDiv += '<div data-action="' + escape(JSON.stringify(value)) + '" >CONTENT</div>';
  });

  $("body").append(childDiv);

  $("body").on('click', 'div', function(event) {
    console.log(unescape($(this).data("action")));
  });
});

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