1

I have an HTML unordered list in a Content Editor web part that I'm formatting as tabs where each has an onclick event to show/hide some other data. The issue is that I'm getting all these weirdo attributes injected into my LI elements and it's bloating my page.

Here's the initial HTML:

<ul id="HPTabs">
   <li id="HP-CompNews">
      <div class="Active">Company News</div>
   </li>
   <li id="HP-MyLoc">
      <div>My Location</div>
   </li>
   <li id="HP-MyInfo">
      <div>My Information</div>
   </li>
</ul>

Here's my click event:

$('ul #HPTabs li div').click(function () {
   $('ul #HPTabs').find(".Active").removeClass('Active');
   $(this).addClass('Active');
   $('#HP-CompNews, #HP-MyLoc, #HP-MyInfo').css('display', 'none');
   $('#'+$(this).parent().attr('id').split('-')[1]).css('display', 'block');
});

The functionality works as intended except that for every click, another jquery(GUID?)="someNumber" attribute gets injected into my HTML. Here's an example of what it looks like after a few clicks:

<ul id="HPTabs">
   <li id="HP-CompNews">
      <div class="Active" jquery110204516100992192893="16" jquery1102032202719870924345="16" jquery110201957534008842723="16" jquery110206010765075112563="16" jquery110205030024967078637="16" jquery11020240918390025753="16" jquery110205795853442488423="16" jquery110207744044316576384="15" jquery110206115635669787789="15" jquery110209485645959143213="15" jquery1102037456364818752646="15" jquery110201352150105905291="15" jquery110209849012308610433="15" jquery110204805339193009697="15" jquery110207504123057924319="15" jquery1102049844052243903514="15" jquery110209780298183681414="15" jquery110202694160068175796="15" jquery11020018363243469401324="15" jquery1102011301930135993976="15" jquery1102026479443747328696="15" jquery1102030561950264041976="15" jquery110202945977674906085="15" jquery110207990703522867846="15" jquery1102035656433625163564="15" jquery110200921925300649431="16" jquery11020041262761778884216="16" jquery110200075315197566104275="16" jquery1102029544368951496863="16" jquery1102044976213483513166="15" jquery1102024529203354116913="15" jquery110205500073059982571="15" jquery110204459848878633349="15" jquery110204810727017335449="15" jquery110207130104700713545="15" jquery110204107102120462112="15" jquery110208062580827974011="15" jquery110207526860699211768="15" jquery110203082284355632704="15" jquery1102043527519695676786="15">Company News</div>
   </li>
   <li id="HP-MyLoc">
      <div jquery110204516100992192893="18" jquery1102032202719870924345="18" jquery110201957534008842723="18" jquery110206010765075112563="18" jquery110205030024967078637="18" jquery11020240918390025753="18" jquery110205795853442488423="18" jquery110207744044316576384="17" jquery110206115635669787789="17" jquery110209485645959143213="17" jquery1102037456364818752646="17" jquery110201352150105905291="17" jquery110209849012308610433="17" jquery110204805339193009697="17" jquery110207504123057924319="17" jquery1102049844052243903514="17" jquery110209780298183681414="17" jquery110202694160068175796="17" jquery11020018363243469401324="17" jquery1102011301930135993976="17" jquery1102026479443747328696="17" jquery1102030561950264041976="17" jquery110202945977674906085="17" jquery110207990703522867846="17" jquery1102035656433625163564="17" jquery110200921925300649431="18" jquery11020041262761778884216="18" jquery110200075315197566104275="18" jquery1102029544368951496863="18" jquery1102044976213483513166="17" jquery1102024529203354116913="17" jquery110205500073059982571="17" jquery110204459848878633349="17" jquery110204810727017335449="17" jquery110207130104700713545="17" jquery110204107102120462112="17" jquery110208062580827974011="17" jquery110207526860699211768="17" jquery110203082284355632704="17" jquery1102043527519695676786="17">My Location</div>
   </li>
   <li id="HP-MyInfo">
      <div jquery110204516100992192893="19" jquery1102032202719870924345="19" jquery110201957534008842723="19" jquery110206010765075112563="19" jquery110205030024967078637="19" jquery11020240918390025753="19" jquery110205795853442488423="19" jquery110207744044316576384="18" jquery110206115635669787789="18" jquery110209485645959143213="18" jquery1102037456364818752646="18" jquery110201352150105905291="18" jquery110209849012308610433="18" jquery110204805339193009697="18" jquery110207504123057924319="18" jquery1102049844052243903514="18" jquery110209780298183681414="18" jquery110202694160068175796="18" jquery11020018363243469401324="18" jquery1102011301930135993976="18" jquery1102026479443747328696="18" jquery1102030561950264041976="18" jquery110202945977674906085="18" jquery110207990703522867846="18" jquery1102035656433625163564="18" jquery110200921925300649431="19" jquery11020041262761778884216="19" jquery110200075315197566104275="19" jquery1102029544368951496863="19" jquery1102044976213483513166="18" jquery1102024529203354116913="18" jquery110205500073059982571="18" jquery110204459848878633349="18" jquery110204810727017335449="18" jquery110207130104700713545="18" jquery110204107102120462112="18" jquery110208062580827974011="18" jquery110207526860699211768="18" jquery110203082284355632704="18" jquery1102043527519695676786="18">My Info</div>
   </li>
</ul>

Is this barrage of garbage attributes SharePoint's way of being helpful? Or is it a jQuery syntax issue on my click event? I wouldn't have a problem with a single attribute getting injected if it needs to happen but a new attribute with each click? C'mon..

This is on SP Server 2013 - Standard using jquery 1.10.2

  • The "Off topic" point trolls are suggesting I move this thread to stack overflow... But since SharePoint is a platform and this question relates to programming the DOM on the platform, it's valid to keep it here. – Josey Feb 25 '14 at 13:56
  • I do not agree in this case, this question and the answer would be exactly the same if you added the same code elsewhere. This is a built-in jQuery behavior and not SharePoint specific. – Robert Lindgren Feb 25 '14 at 14:00
  • But as all ways, it is up to the community to decide. Since you have edited your post, a poll for reopening has started and hence given the community members with enough reputation the possibility to vote to reopen or keep closed :) – Robert Lindgren Feb 25 '14 at 14:03
  • Given SharePoint's previous behavior of injecting garbage attributes into HTML in SharePoint Designer, similarities can be made between the Designer HTML injection bugs and this issue. – Josey Feb 25 '14 at 14:50
  • You should actually try to put this HTML and JS outside SharePoint to confirm that its JQuery and not SharePoint :) – Arsalan Adam Khatri Feb 25 '14 at 15:06
3

Those are the jQuery expando added attributes. As I understand, jQuery uses these for object caching and avoiding circular references. Also, if you call .html() on a jQuery object, it shouldn't include the expando properties.

They shouldn't impact performance in a negative way.

  • Thanks Tyshock. So I'm not understanding this whole idea that if an element has one million of these attributes on a single DOM element that it doesn't affect performance. I mean the expando integers don't change once they are created so they have to use memory, right? – Josey Feb 25 '14 at 14:56
  • I did what you suggested and called .html on the element with these 'expandos' and it returned the item with the expando's included... so they are in the DOM – Josey Mar 7 '14 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.