添加一個帶數據的div

我正在生成一個flash SWF列表，這個信息來自一個ajax調用，它返回一個json對象，我通過循環來創建使用我的makeAppRow函數的數據行。添加一個帶數據的div

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); 
    }

我需要的JSON數據被附加到gotoAppBtn使其點擊時我可以把數據從附着JSON對象讀取和我的點擊函數中使用它，你可以看到我一直試圖使用html5數據嵌入數據，但我無法讓它工作。

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

我有一個函數，當按鈕被點擊時，它加載一個瑞士法郎。

$('.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)  
    });

但數據似乎並不存在，任何指向哪裏我錯了，或者更好的方式來實現呢？

來源

2010-12-22 Dizzy Bryan High

您可以發佈由`makeAppRow是輸出的HTML ` – 2010-12-22 19:34:15

12th February, 2009, 1:00 AM

DAT demo Update Feb 09

Open App

` – 2010-12-22 20:21:44

您需要將myData JavaScript對象轉換爲字符串，然後再將其放入屬性中。請從json2.js查看JSON.stringify。

如果你使用jQuery來創建你將不再需要使用data-屬性，因爲你可以使用$.data設置數據的HTML也可以使用。數據（）函數

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

來源

2010-12-22 19:33:04 Shurdoof

很好的解決方案感謝到底 – 2010-12-22 19:58:35

嘗試其他建議我ened了使用該soloution，使用此代碼後：$（ 'gotoAppBtn：最後的'）。數據（「選項」，myDat a）`謝謝大家的幫助 – 2010-12-23 14:22:32

。這是您的makeAppRow函數嚴格的jQuery版本。

$('<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')

來源

2010-12-22 19:33:14

您可以使用jquery .data()存儲與html元素關聯的任意數據。綜觀文檔，你可以將這樣的數據你makeAppRow函數中 -

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

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

，然後檢索它像這樣： -

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

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

來源

2010-12-22 19:38:52

添加一個帶數據的div

回答

相關問題