Добавление div с данными ()

Question

Я генерирую список флэш-SWF-файлов, информация поступает от вызова ajax, который возвращает объект json, который я перебираю для создания строк данных, используя мою функцию makeAppRow.

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>

У меня есть функция, чтобы при нажатии кнопки она загружалась в файл 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)      
    });

но данных, похоже, там нет, есть какие-либо указатели на то, где я ошибаюсь, или лучший способ добиться этого?

Answer 1

Если вы используете jquery для создания HTML, вам не нужно использовать атрибуты data-, потому что вы можете установить данные, используя $.data. Вот строго jQuery-версия вашей функции makeAppRow.

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

Answer 2

Вы можете хранить произвольные данные, связанные с элементом html, используя jquery .data () .Глядя на документацию, вы можете прикрепить данные в этой функции 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

Answer 3

Вам нужно превратить объект javascript myData в строку, прежде чем поместить его в атрибут. Взгляните на JSON.stringify из json2.js .

Вы также можете использовать функцию .data ()

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