Append a CSS Stylesheet with jQuery

[iwato]

Please consider the following code and see if you can find anything wrong.  The appended <link> does not appear to register the information contained in the stylesheet.  You can observe the failure by clicking on the menu item Weekly Podcasts under Products in the page's navigation bar (left column) and then passing your cursor across the blank area between the subtitle "Weekly Podcast Host Page" at https://www.grammarcaptive.com/overview.html

	$("#podcasts").mouseover(function() {
			$(this).css({"cursor": "pointer", "font-weight":"800"});
		})
		.click(function() {
			$("#main").load("podcast_filler.html #podcasts_div");
			$("<link/>", {
			   rel: "stylesheet",
			   type: "text/css",
			   href: "_utilities/css/podcast_filler.css"
			}).appendTo("head");
			$.ajax({
				url: './_utilities/php/most_recent_podcast.php',
//				context: '#main',
				dataType: 'JSON',
				success: function(jsonData) {
					$.each(jsonData, function(key, object) {
						var podcast_number = jsonData.podcast_no_item; 
						var podcast_title = jsonData.item_title; 
						var podcast_desc =  jsonData.item_description; 
						var podcast_guid =  jsonData.item_guid; 
						var podcast_pubdate =  jsonData.item_pubdate;
						$('#main span#pc_title').html(podcast_title);
						$('#main span#pc_desc').html(podcast_desc);
						$('#main span#pc_num').html(podcast_number);
						$('#main span#pc_pubdate').html(podcast_pubdate);
						var click_listen = 'podcast_hostpage.php?hash=' + podcast_guid + '&podcast_no=' + podcast_number;
						$('#pc_click_listen').attr('href', click_listen);
					});
				}
			});				
		})
		.mouseup(function() {
			$(this).css({"color": "#fadb9d","font-weight": "normal"});
		$('body, html').animate({scrollTop: $('#main').offset().top},800);
	});

 Roddy

[dsonesuk]

Does the link element and attributes actually show correctly?

[iwato]

Yes,  you can see it as 

<link rel="stylesheet" type="text/css" href="_utilities/css/podcast_filler.css">

And, the link appears as

<a id="pc_click_listen" class="pc_link" href="podcast_hostpage.php?hash=30a6836a3f7c5fc57751a61098e5c2fc&amp;podcast_no=92" title="Grammar Captive Weekly Podcasts" target="_top">Click and Listen</a>

And, this is the CSS code in the stylesheet podcast_filler.css

			a:link.pc_link {color:#999999; font-weight: normal; text-decoration: none;}
			a:visited.pc_link {color:#aaaaaa; font-weight: normal;}
			a:hover.pc_link {color:#ffffff; font-weight: bold;}
			a:active.pc_link {color:#fadb9d; font-weight: bold;}

 

[dsonesuk]

The problem is, you have a preceding css styling with an id ref in the selector. this will have a higher precedence over styling of anchor using class only.

[iwato]

'Tis true, but it says nothing about font color.

			h3 a#pc_click_listen {
				font-family: 'Bradley Hand', cursive;
				font-size: 1.6em;
			}

Roddy

Edited January 30, 2018 by iwato

[dsonesuk]

??

a.pc_link:link {
    color: #999999;
    font-weight: normal;
    text-decoration: none;
}
a.pc_link:visited {
    color: #aaaaaa;
    font-weight: normal;
}
a.pc_link:hover {
    color: #ffffff;
    font-weight: bold;
}
a.pc_link:active {
    color: #fadb9d;
    font-weight: bold;
}

but these do, the styling will be overridden by

 

#middle a:hover {
    color: #999999;
    font-weight: 800;
}

#middle a:link {

    color: #5a4149;

    font-weight: 400;

    text-decoration: none;

}

and so on.

[iwato]

Got it!  Problem resolved.

Another victory for W3Schools and me!

Roddy