Question

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

// 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属性。（.data()在内部将其值存储在jQuery.cache中）

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

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

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

数据属性不在动态DOM上持久化

1 个答案: