.load () in jQuery and odd behavior

Question

I am implementing a simple jQuery script on a website that loads content from one section of a webpage into a “display container” on the same webpage.

The content I upload is a few divs that are all wrapped in an external <div> that was hidden from the view.

I have a display container div and some links that can be clicked on. Each time they click on the link, the corresponding associated content is loaded into the display container.

My jQuery.

---

 $(".Prod-Link-2").click(function(e){ e.preventDefault(); $("#ITARGET").empty(); $("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />'); $("#ITARGET").load($(this).attr('href')); }); 

HTML menu

---

 <div class="MPD"> <div class="Option"> <a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a> </div> <div class="Option"> <a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a> </div> <div class="Option"> <a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a> </div> <div class="Option"> <a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a> </div> </div> 

Target div

---

 <div class="Info-Target" id="ITARGET"> </div> 

So my problem is that everything works except one of the links.

My hidden div has 4 content sections and 2 tables, inside which everyone has their own identifiers. SPECIFICATIONS captures #specTable , APPLICATIONS captures #FEAT div, etc. etc. ACCESSORIES will not load the div #ACCESSORY at all, and I don't know why. The script is initialized and the gid page of the page loader is displayed, but then instead of displaying the content that I am trying to load .. it does not display anything.

Hidden Area Format

---

 <div style="display: none;"> <div id ="COMPARE"> some content </div> <table id="specTable"> some content </div> <div id ="ACCESSORY"> some content </div> etc .... </div> 

For testing purposes

---

 <div id="ACCESSORY"> <p> This is the accessory div </p> </div> 

Regardless of the fact that I change the name in the ID tag and href attr links, it will not load (I even tried to create a new div with a different name and move the div to the top of the hidden content area thinking it might be a loading problem), but if I changed the href attr links to one of the tables or to another div, for example #FEAT or #specTable .., it will load this.

The feeling of my feeling is that there is some qwirk with jQuery and .load() that I don't know about.

Answer 1

This issue may be related to CSS. I just looked at a few products, and wherever the content contains lists, the display looks blank due to excessive excess space.

This CSS rule seems guilty:

 .Features li:before { content: url(#)!important; }