Add HTML5 DATA attributes to Element stored in Javascript variable

Question

I am looping through an AJAX request and adding a list of <li> to a <ul> from the results.

What I am having trouble with is storing DATA being returned from the AJAX request on these items as HTML5 DATA attributes. Here is some example code:

function load_items(json_url, callback) {

  // Set a variable to contain all the items
  var all_the_items = $('<ul class="all_items_cont"></ul>');

   $.ajax({
      type: 'GET',
      cache:false,
      url: json_url,
      jsonpCallback: 'jsonCallback',
      contentType: "application/json",
      dataType: 'jsonp',
      success: function(data) {

        $.each([].concat(data.item), function(i, post){

          // Create An Item
          var current_item = $('<li><a>'+ post.title + '</a></li>');

          // This is how I tried to add the data... not working
          current_item.find('a').data('description',post.description)

          // Append Item to <ul>
          $(all_the_items).append(current_item);     

        });   

        if (typeof callback === 'function') {
          callback(all_the_items.html());
        }

     }      
  });
}      

Ten I call the function and append the HTML to a target <div> :

 load_items('http://jsonurl.com',function(html){
    $('div#container').append(html)
  })  

I've found that if I write the DATA into the HTML explicitly than it works just fine, but if I use jQuery to store the data attributes than I cannot retrieve them later.

I can't write the Data Attributes out explicitly in the HTML because sometimes they are an entire JSON feed or really complicated description.

Any ideas?

------ EDIT 5/21/15 3:38pm -------

I am accessing the data using the jQuery data function as such:

  $('div#container ul li:first a').data('description')

This is just an example as the code I am actually utilizing is jQuery Droppable and retrieving the content on DROP. This is a lot of unnecessary code for the questions sake.

Answer 1

If I gather your question correctly, what you're trying to do (set arbitrary data on a DOM element, then pull it out as a data-foo="" attribute) isn't something that JQuery was meant to do.

data-foo attributes are not the same as what the .data method sets. Data can flow in one direction, from the attribute to the element's data store (done automagically by JQuery), but not the other way around

If you really want to pull it out as part of the HTML, you'll have to set the data-foo attribute manually.

// attach the data to the DOM element
$(myElement).data('description', post.description);
// set the data-description attribute so we can pull it out as HTML
$(myElement).attr('data-description', post.description);

Another problem I see with your code is that if post.title contains malformed HTML it could break the <a> element when you call $('<a>'+post.title+'</a>') .

Answer 2

When setting callback(all_the_items.html()); it will remove the DATA associated with the DOM element and variable and turn it into straight HTML. By changing it to this: callback(all_the_items); it will work.