Why dynamic insertion of buttons correct, but .data() not being passed

Why dynamic insertion of buttons correct, but .data() not being passed


For reference:
jquery-2.1.1.min.js
jquery.mobile-1.4.5.min.js

Problem exists in bigger project, I pulled code into a test page and tried to fix. I failed. I hope someone can direct me forward.

Problem: I dynamically insert buttons into my page. Afterwards, I want to apply .data() values to each of the buttons - The buttons exist in the "generated source code" but any reference to the data key/value are missing.

Interestingly, my js can reference the key/value pair as if it exist in the page though it is missing in the generated source code (using firefox 33.1 on Windows 7 with developer plugin).

My test HTML:
<form><div id='SidePage'>&nbsp;</div></form>

My test js
  1. function one()
    {
        var LANG="EN";
        var limit=50;
        var data=new Array();
        for( var counter=0; counter<limit; ++counter )
        {
            data.push({ "id_Content": counter, "EN": "Blurb"+counter });
        }
       
        var keys=GetObjKeys( data );
        var limit=keys.length;
        var id_Content=0;
        var label="";
        var buttonList=new Array();
        var id="";

        for( var counter=0; counter<limit; ++counter )
        {
            key=keys[counter];
            record=data[key];
            if( record[LANG] )
            {
                label=record[LANG];
                id_Content=record.id_Content;
                id="prodCont"+id_Content;
                buttonList.push("\n<a href='#' id='"+id+"' data-value='"+id_Content+"' data-role='button' class='crap ui-btn ui-btn-inline product-content'>"+label+"("+id_Content+")</a>");
            }
        }
        $("#SidePage").prepend( buttonList.join("\n") )+"</span>";
        $(".crap").data("one","two");
       
        var abc=$(".crap").eq(1).data("one");
        console.log( "abc="+abc );

        return true;
    }

    ///////////////////////////////////////////////////////////////////////////////////////////

    $(document).ready(
        function ()
        {
            one();
        });


The "generated source code" produces the following (note there is no reference to "data-one='two'" anywhere. My question is WHY?!

<form>
        <div id="SidePage">
<a href="#" id="prodCont0" data-value="0" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb0(0)</a>

<a href="#" id="prodCont1" data-value="1" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb1(1)</a>

<a href="#" id="prodCont2" data-value="2" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb2(2)</a>

<a href="#" id="prodCont3" data-value="3" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb3(3)</a>

<a href="#" id="prodCont4" data-value="4" data-role="button" class="crap ui-btn ui-btn-inline product-content">Blurb4(4)</a>
                &nbsp;
        </div>
    </form>