jQueryの.data（）はjQueryの作成された要素では維持されません

Question

次の例では、jQueryでいくつかのhtml要素を追加してから、いくつかのデータをjQueryに割り当てました。私はの割り当ての後に$("#p1").data();が空のオブジェクトを返す理由を理解できません。

$(document).ready(function() { 

    //Create a new <p> elment and use jQuery to assign some data to it 
    $("body").html($("body").html() + "<p id='p1'>TestOne</p>"); 
    $("#p1").data("intID", "a"); 

    //confirm data assignment was successful 
    console.log($("#p1").data()); 

    //Create new <p> element and assign different data to it 
    $("body").html($("body").html() + "<p id='p2'>TestTwo</p>"); 
    $("#p2").data("intID", "b"); 

    //Check that all data still exists (spoiler alert: it doesn't) 
    console.log($("#p1").data()); 
    console.log($("#p2").data()); 
}); 

結果のコンソール出力は：

{intID: "a"} 
{} 
{intID: "b"} 

私はすでにこれは、既存のHTML要素と私が望むように動作することを確認した（すなわち、HTMLソースで定義されたもの）。私はhttps://api.jquery.com/data/を梳きましたが、そこからそれを理解することはできません。

私は達成したいことを実行するための他の方法があることを理解しています。なぜ私はこれが別の解決策であるのかという理論的な説明にもっと興味があります。私はそれがバグだと思うだろうが、その程度のコーディングの傲慢はずっと前に私の中で死んだ。ありがとう！

Answer 1

.data()に何も問題はありません。値は維持されます。ただし、問題は<p>要素を作成する方法です。

$(document).ready(function() { 
 

 
    //Create a new <p> elment and use jQuery to assign some data to it 
 
    $("body").append("<p id='p1'>TestOne</p>"); 
 
    $("#p1").data("intID", "a"); 
 

 
    //confirm data assignment was successful 
 
    console.log($("#p1").data()); 
 

 
    //Create new <p> element and assign different data to it 
 
    $("body").append("<p id='p2'>TestTwo</p>"); 
 
    $("#p2").data("intID", "b"); 
 

 
    //Check that all data still exists (spoiler alert: it doesn't) 
 
    console.log($("#p1").data()); 
 
    console.log($("#p2").data()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id='p1'>TestOne</p> 
 
<p id='p2'>TestTwo</p>