Clickable Link that Does Not Link

[iwato]

REQUEST:  Please compare the following two links:  one works and the other does not.

LINK ONE (functional):  This link is accessed by going to the Grammar Captive mainpage and clicking on the words Weekly Podcast under the Products heading in the navigation bar.  When the panel opens find the phrase Click and Listen.  You should be redirected to the podcast_hostpage.

LINK TWO (dysfunctional):  This is accessed by going to the mainpage and clicking on the word Podcasts under the heading Search Grammar Captive in the navigation bar.  When the panel opens search for the single word podcast.  A list of options should become available.  Click on the phrase Discover more ... under any of them.   When the hidden data appears click on the phrase Click and Listen.  Nothing happens.

DISCUSSION:  Both links (LINK ONE and LINK TWO) are identical in every way, but the query strings.  One works, the other does not.  With the  exception to some problematic links to Facebook created by jSocials the console indicates no error.  Interestingly, in the dysfunctional case the timer runs as if an infinite loop had been created.  Careful scrutiny of the code yields no common source of error.

QUESTION:  What is likely causing LINK TWO to fail?

(function() {
	$(".SearchButton").click(function() {
		/*******************************************************
		Displays error message, if no input is present when the submit
		button is clicked.  Hides the error message when a proper search
		is initiated. 
		*******************************************************/
		var search_podcast_input = $("#podcast_input").val();
		if (search_podcast_input == "") {
			$("#podcast_input_error").show().append('<br />');
			$("#podcast_input").focus().focusout(function() {
				$("#podcast_input_error").hide();
			});					
			return false;
		}
		var dataString = 'search_input=' + search_podcast_input;
		$.ajax({
			type: "POST",
			url: './_utilities/php/search_podcast.php',
			data: dataString,
			dataType: 'JSON',
			statusCode: {
				404: function() {
				alert( "Page not found" );
			}},
			success: function (jsonData){
				$("<link/>", {
				   rel: "stylesheet",
				   type: "text/css",
				   href: "./_utilities/css/podcast_list.css"
				}).appendTo("head");
				$("<link/>", {
				   rel: "stylesheet",
				   type: "text/css",
				   href: "./_utilities/css/podcast_select.css"
				}).appendTo("head");
				$('#podcast_matches').html('');
				$('#podcast_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_podcast_input + "</span> ] in descending order of matched relevance are:</p>");
				$.each(jsonData, function(key, object){
					$('#podcast_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br /><span class='pubdate'>" + object.item_pubdate + "</span></div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='podcast_link'><a href='podcast_hostpage.php?hash=" + object.item_guid + "&podcast_no=" + object.podcast_no_item + "' title='' target='_self'>Click and Listen</a></div><div class='duration'>Duration: " + object.itunes_duration + "</div><div class='summary'><h2>Summary</h2>"+ object.itunes_summary + " </div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->");
});

				var collection = $(".paginate");
				var collNum = collection.length;
				var perPage = 3;
				collection.slice(perPage).hide();
				$('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->");
				$("#pagn").pagination({
					items: collNum,
					itemsOnPage: perPage,
					cssStyle: "light-theme",
					onPageClick: function(pageNum) {
						var start = perPage * (pageNum - 1);
						var end = start + perPage;
//									console.log(event);
//									console.log(pageNum);
						collection.hide().slice(start, end).show();
						$('body, html').animate({scrollTop: $('#podcast_matches').offset().top},800);

					}
				});
				/********************
				BEGIN PODCAST INSERT
				********************/
				$("div.discover").mouseover(function() {
					$(this).find("span.discover_text").css({"cursor": "pointer","line-height":"1.6em","font-size":"1.4em"});
				});
				$("div.discover").click(function() {
					$(this).next("div.hidden_info").slideToggle(800, function() {
						$('.podcast_link').find('a').on('click', function(event){
						event.preventDefault();
						var attribute = $(this).attr('href');
						var href_arr = attribute.split('?');
						var query_str = href_arr[1];
						var pairs = query_str.split('&');
						var data = [];
						$.each(pairs, function(i, v){
							var pair = v.split('=');
							var key = pair[0];
							var value = pair[1];
							var data_arr = [key, value];
							data.push(data_arr);
						});
					});
					});
					$(this).mouseup(function() {
						$(this).css({"color": "#ccc", "font-weight": "normal"});
					});
					$('body, html').animate({scrollTop: $(this).offset().top},800);
				})
				.mouseout(function() {
					$("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"});
				});
				/********************
				END PODCAST INSERT
				********************/           
			},
			complete: function(jqXHR, status) {
				if (status === 'success') {
					var aside_height = $('aside').height();
					$('#main').css('min-height', aside_height);
					$('#pagn').show();
				}
				selfSearchResults_Podcast = $('#main').html();
			}
		});
	});
})();

Please advise.

Roddy  

[justsomeguy]

I'm not sure where you attach it, but there are 2 click handlers on that anchor element.  If I remove one of them then the browser will load the URL, so you must be stopping the default behavior so that the browser doesn't follow the URL.  If you don't want the browser to just follow the URL then look at your click handler to figure out what it's doing.

[justsomeguy]

If that code above has the click handler, I see one for podcast_link elements that isn't going to do anything.  You prevent the default behavior, get some data, and that's it.

[iwato]

14 minutes ago, justsomeguy said:

I'm not sure where you attach it, but there are 2 click handlers on that anchor element.

Which anchor is "that anchor"?

Roddy

Edited March 3, 2018 by iwato

[iwato]

I found the problem.  In order to build my search engines I copied code from several different places on my website.  In so doing I copied an event.preventDefault statement that was unnecessary in the given context.  Both search engines work well now.  Thank you for your help.  Have a great weekend!

Roddy