Strange jQuery IE8 issue

Hi there, I wrote some jQuery which works great on all browsers except IE8. When I inspect the DOM in this browser I see strange numbers inside the node tags as below:


<body jQuery1102008082410746088636="43">

<li jQuery1102008082410746088636="19">

In my jQuery code below, these are the two tags which I use jQuery on and I can’t seem to find any bugs in the code, passes jsHint and also doesn’t break other js on the page. What is going on??



(function($) {
 
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });


    });


$( document ).ready(function() {

   
	function createHTML(list){
		ListHTML = '';
		for (var i = 0; i < list.length; i++) {
		ListHTML += list[i];
		}
		return ListHTML;
	}
	$( "ul#menu-main li" ).click(function(e) {

		e.preventDefault();
		var heading = $(this).find(".menu_heading").text();
		var title = $(this).find(".menu_title").text();
		var link = $("a",this).attr('href');
		
		var list = $(this).next().find("ul");
	
		if(list.length)
		{
		
		var listsArr = [];
       
		
		//Create array of all menu items 
		list.find('li').each(function(){
	//	console.log(this.outerHTML);
			listsArr.push(this.outerHTML);
		});

		//Split the array at this point. The original array is altered.
		var firstList = listsArr.splice(0, Math.round(listsArr.length / 2));
		secondList = listsArr;
		
			//Generate HTML for second list
		firstList = createHTML(firstList);
		//Generate HTML for second list
		secondList = createHTML(secondList);
		
			
			
		var menu_html = '<div style="display: block;" id="drop" class="navsub"><div class="navsub_heading"><h2>'  + title + '</h2><p>' + heading + '</p></div><div class="navsub_row"><div class="navsub_f_col1"><ul>' + firstList + '</ul></div><div class="navsub_f_col2"><ul>' + secondList + '</ul></div><div class="navsub_f_col3"><img width="216" height="143" alt="" src="http://localhost/wordpress/wp-content/themes/accalio/images/drop_img.jpg"></div></div><div class="clear"></div><div class="cross-icon"><a href="#"><img id="exit" alt="" src="http://localhost/wordpress/wp-content/themes/accalio/images/cross-icon.png"></a></div></div>'; 
		 
		$(menu_html).insertAfter(".top_inner");
        menu_open = true;
        

		}
		else
		{
			location.href = link;
		}
		
	});



	$( "body" ).delegate( "#exit", "click", function() {
		$(".navsub").remove();
	});

	$( "ul#menu-main li" ).delegate( "*", "click", function(e) {
        var menu_open = false;
        if (document.getElementById('drop')) {
      $(".navsub").remove();
    } 
	});


$( document ).delegate( "body", "click", function(e) {
		var tag = e.target.getAttribute("class");
		var in_menu = false;
		if ( $(e.target).parents("#drop").length == 1 )
		{
			in_menu = true;
		}
		else
		{
			in_menu = false;
		}
        if(tag != "menu_link" && tag != "menu_description" && in_menu === false)
        {
         $(".navsub").remove();
        }

	});

});



})( jQuery );


Hi,

Which version of jQuery are you using?

Hey there,

Thanks for your reply, I am using latest wordpress so I’m guessing it either loads from CDN or is the latest version anyway. Do you know what, I just flushed the browser cache and it is now working but is still appending those strange numbers to the tags in question. I have lots of experience with jQuery and have never seen it before which is why I posted, what about you Pullo, you see this sort of thing?

Nope, never come across it myself.
I thought maybe you were using the 2.x branch which has dropped support for IE8.

What is happening that is causing issues? Is it just not working, is it throwing errors?

Explanation of the extra attribute: jQuery is adding a strange attribute to nodes

(I wish I could just edit this into my last post :frowning: )