数据属性不保留在动态 DOM 上

Question

我正在基于从 MySQL 数据库返回行的 AJAX 请求创建动态 DOM 元素。我想要做的是创建一个很棒的字体图标，以便它可以在使用 jQuery v.3.2.1 时启动 twitter-bootstrap v.4 模式。由于启动模式的元素需要 data-target 和 data-toggle 属性，因此我还需要在创建 DOM 时设置这些值，但无论出于何种原因，每当我尝试以下代码时，它都不起作用：

// This
$("<i />", {
  class: "fa fa-pencil-square text-warning",
  style: "margin-left: 0.5em; cursor: pointer;"
}).attr("data-toggle", "modal").attr("data-target", "#frmInsertPolicy").attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last");

// OR this
$("<i />", {
  class: "fa fa-pencil-square text-warning",
  style: "margin-left: 0.5em; cursor: pointer;"
}).attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last");
$("#tabCustomers div:last h3:last i:last").attr("data-toggle", "modal").attr("data-target", "#frmInsertPolicy");

// OR this
$("<i />", {
  class: "fa fa-pencil-square text-warning",
  style: "margin-left: 0.5em; cursor: pointer;"
}).data("toggle", "modal").data("target", "#frmInsertPolicy").attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last");

// OR this
$("<i />", {
  class: "fa fa-pencil-square text-warning",
  style: "margin-left: 0.5em; cursor: pointer;"
}).attr("aria-hidden", true).appendTo("#tabCustomers div:last h3:last");
$("#tabCustomers div:last h3:last i:last").data("toggle", "modal").data("target", "#frmInsertPolicy");

我调试代码并确认 <i> DOM 元素正在创建，并且 aria-hidden 属性也正在设置中，但无论出于何种原因，这两个数据属性都没有设置。

更新 对于那些没有费心阅读我尝试过的代码并且只想将答案标记为重复的人...我尝试在创建动态 DOM 元素时和动态 DOM 元素之后使用 attr 属性已创建。

Answer 1

您应该使用.attr("data-toggle") 将数据属性持久化到 html DOM 元素上。 （.data() 内部将其值存储在 jQuery.cache 中）

您可以在那里找到更多信息：

http://api.jquery.com/data/

data-属性在data属性第一次被拉取 访问，然后不再被访问或变异（所有数据值 然后存储在 jQuery 内部）