用data（）添加一个div

I am generating a list of flash SWFs, the information comes from an ajax call which returns a json object which i loop through to create the rows of data using my makeAppRow function.

makeAppRow = function(myData){
        var myStr = '<div class="fileEntry">'
      myStr = myStr +'<div class="appDate">'+dateFormat(myData.date_swf, "dS mmmm, yyyy, h:MM TT")+'</div>'
      myStr = myStr +'<div class="appName">'+myData.name_swf+'</div>'
      myStr = myStr +'<div class="appOptions" data>'
      myStr = myStr +'<div class="gotoAppBtn" data-options="'+myData+'">Open App</div>'
      myStr = myStr +'</div>'
      myStr = myStr +'</div>'
        $('#appData').append(myStr);
    }

I need the json data to be attached to the gotoAppBtn so that when its clicked I can read in the data from the attached json object and use it in my click function, as you can see I've been trying to embed the data using the html5 data but I can't get it to work.

 <div class="gotoAppBtn" data-options="'+myData+'">Open App</div>

I have a function so that when the button is clicked it loads in an swf.

$('.gotoAppBtn').live('click', function(){
        //alert('button clicked')
        var myData = $(this).data("options")
        alert('../userfiles/'+myData.id_ugp+'/'+myData.id_swf+'/'+myData.launchfile_swf+'')
        console.log(myData);
        var flashvars = {};     
        var params = {};
        params.menu = "false";
        params.quality = "best";
        params.scale = "noscale";       
        var attributes = {};
        attributes.id = "flashAppDisplay";
        attributes.name = "flashAppDisplay";
        swfobject.embedSWF(
            '../userfiles/'+myData.id_ugp+'/'+myData.id_swf+'/'+myData.launchfile_swf+'', 'flashAppDisplay', myData.width_swf, myData.height_swf,  myData.version_swf ,"../FAVideo/expressInstall.swf", flashvars, params, attributes)      
    });

but the data does not seem to be there, any pointers on where I am going wrong, or a better way to achieve this?

You need to turn the myData javascript object to string before you put it in the attribute. Take a look at JSON.stringify from json2.js.

You can also use the .data() function

$('#appData .gotoAppBtn:last').data("options",myData)

If you use jquery to create the HTML you will not need to use the data- attributes because you can set the data using $.data. Here is a strictly jQuery version of your makeAppRow function.

$('<div class="fileEntry"></div>')
    .append('<div class="appDate"></div>')
    .find('.appDate')
        .html(dateFormat(myData.date_swf, "dS mmmm, yyyy, h:MM TT"))
        .end()
    .append('<div class="appName"></div>')
    .find('.appName')
        .html(myData.name_swf)
        .end()
    .append('<div class="appOptions"></div>')
    .find('.appOptions')
        .append('<div class="gotoAppBtn">Open App</div>')
        .find('.gotoAppBtn')
            .data(myData)
            .end()
        .end()
    .appendTo('#appData')

You can store arbitrary data associated with an html element using jquery .data(). Looking at the documentation, you can attach the data like this inside your makeAppRow function -

$('#appData').append(myStr);

//After appending
div = $("div.gotoAppBtn")[0];
$.data(div, "data", { options: myData });

And then retrieve it like this:-

$('.gotoAppBtn').live('click', function(){
   //alert('button clicked')

   div = $("div.gotoAppBtn")[0];
   var myData = $.data(div, "data").options