データ属性が動的DOMで持続しない

Question

MySQLデータベースから行を返すAJAX要求に基づいて動的DOM要素を作成しています。私がしようとしているのは、jQuery v.3.2.1を使ってtwitter-bootstrap v.4モーダルを起動できるように、フォントの素晴らしいアイコンを作成することです。モーダルを起動する要素はデータターゲットとデータトグル属性を必要とするため、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要素が作成されており、アリア、隠された属性も設定されているが、何らかの理由で二つのデータの属性が設定されていないことを確認してください。困っていません人のために

更新 は、私が試したコードを読んで、ちょうど重複として答えをマークしたい...私はATTR属性を使用しようとし、両方のダイナミックなDOM要素がされているとき動的DOM要素が作成された後に作成されます。

Answer 1

html DOM要素のデータ属性を保持するには、.attr("data-toggle")を使用する必要があります。

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

データ - 属性は、データプロパティが が最初にアクセスされたときに引っ張られると：

あなたがより多くの情報を見つけることができます（.data()は内部jQuery.cacheにその値を格納します） （データ値 はすべてjQueryの内部に保存されます）