Question

我有一个用JavaScript创建的html元素。
此元素还应该将一个对象另存为data-属性，然后转换为纯html。
我的问题是，data-属性在访问prop("outerHTML")之后消失了。

这是我的意思：

let obj = $("<i>TEST</i>");
obj.data("key", "value");
let html = obj.prop("outerHTML");
console.log("DATA: " + obj.data("key")); //gives value
console.log("HTML: " + html); //gives <i>TEST</i>

我也尝试直接输入data-属性，但引号引起麻烦。

我尝试过：

let dataJSON = JSON.stringify(data);
let obj = $('<i data-test=' + dataJSON + '</i>'

我的目标是生成一个dataTable单元，该单元需要包含一些数据来处理对其的单击。整个过程看起来像这样：

columns: [
   data: "notice_id", render: function (data, type, row) {
      let html = $('<i class="edit-button fas fa-pencil-alt"></i>');
      html.data("notice", row);
      return html.prop("outerHTML");
      }]

编辑：
我应该写的我知道，jQuery并没有真正改变data-属性。我以某种方式希望它在我访问外部html时仍然可以添加它。
但是，链接的问题并没有真正给出如何改善它的答案（除了直接编写会导致简单字符串数据以外的问题）。

Answer 1

如果需要更多的后期处理，可以使用createdCell回调，并在其中添加<i>来丰富data()：

columns: [{
  data: "notice_id", 
  render: function(data, type, row) {
    //no need for constructing jQuery instances here
    return '<i class="edit-button fas fa-pencil-alt"></i>'
  },
  createdCell: function(td, cellData, rowData, row, col) {
    $('i', td).data('notice', rowData)
  }
}]

将jQuery对象转换为html时保留数据

1 个答案: