Data added to element available in one place, but not another

Data added to element available in one place, but not another

I have a jQuery plugin that creates a list of news items and appends the <ul> to the element(s) calling the plugin. Each <li> gets a document key added to its data.

A brief snippet of the code: 

  
    
   
  1. (function ($) {
    2. 
   
  2.   $.fn.NewsList = function (options) {
    3. 
   
  3.     var defaults = { ticker: '', onComplete: function () { } }
    4. 
   
  4.     var options = $.extend(defaults, options);
    5. 
   
  5.     var elements = $(this);
    6. 
   
  6.     elements.showLoading();
    7. 
   
  7.     var newsWrapper = $('<ul/>').addClass('list-content headlineNewsList');
    8. 
   
  8.     $.ajax({
    9. 
   
  9.       // AJAX call stuff removed for brevity
    10. 
   
  10.       success: function (result) {
    11. 
   
  11.         var msg = result.d;
    12. 
   
  12.         $.each(msg, function (index, value) {
    13. 
   
  13.           var newsListItem = $('<li/>').addClass('list-item-news');
    14. 
   
  14.           // Misc. variable assignments removed for brevity
    15. 
   
  15.           newsListItem.html(// HTML removed for brevity);
    16. 
   
  16.           newsListItem.appendTo(newsWrapper);
    17. 
   
  17.           newsListItem.data({ docKey: newsDocKey }) // newsDocKey is a string assigned above
    18. 
   
  18.         });
    19. 
   
  19.       },
    20. 
   
  20.       error: function (request, status, throwerror) {
    21. 
   
  21.         var newsListItem = $('<li/>').addClass('list-item-news');
    22. 
   
  22.         newsListItem.html(// HTML removed for brevity).appendTo(newsWrapper);
    23. 
   
  23.       },
    24. 
   
  24.       complete: function () {
    25. 
   
  25.         elements.append(newsWrapper).fadeIn();
    26. 
   
  26.         options.onComplete.call(this);
    27. 
   
  27.         return this;
    28. 
   
  28.       }
    29. 
   
  29.     });
    30. 
   
  30.   };
    31. 
   
  31. } (jQuery));
    32.
On one page, I call the plugin via the following:

Works great, I see the data in Firebug, and everything is peachy.

  1. $('#Headlines').NewsList();

On a different page, however, when using the following code, the data does not exist: 

  
    
   
  1. $('.headlineList').NewsList({ ticker: currentCompany.Ticker,
    2. 
   
  2.           onComplete: function () {
    3. 
   
  3.             $('.headlineNewsList').children().each(function () {
    4. 
   
  4.               alert($.data($(this),'docKey')); // This returns null
    5. 
   
  5.             });
    6. 
   
  6.           }
    7. 
   
  7.         });
    8.

None of the <li>'s have the data attached to them. I've tested the selector shown above in line 3, and it does pick up the correct <li>'s. The data is not visible in Firebug as it is on the other page. Both functions are called after document.ready and insert the elements after page load.

The only discernible differences between these two circumstances is that in the working case, the plugin is called against an ID, whereas in the nonworking instance, it is called against a CLASS. In addition, in the working case, only one DIV is affected, and in the nonworking case, there are two DIVs that receive the treatment.

Any thoughts out there from any jQuery geniuses? Thanks for any help you send my way... been banging my head on a table for hours with this.