The Where and When of the Styling of Dynamically Inserted HTML

[iwato]

BACKGROUND:  I am loading dynamic HTML and its content via the success function of a $.ajax( ) call.  After it has been loaded I would like to give the user the opportunity to manipulate it using Javascript.  In order to achieve my goal I foresee the use of both Javascript and CSS.

QUESTION:  Where and when in the document should the Javascript be entered?  For example, in the $(document).ready() function?  Please explain why.

[justsomeguy]

It doesn't really matter where you define those functions since there's going to be a delay before they get used (e.g., some action will send an ajax request, the page will get updated, then the functions will be used based on user interaction).  You should probably just put them in a Javascript file that gets included on the page in the head with other things that can go in the head.  But you'll need to make sure that the functions will get executed when the user does whatever you're checking for.  If you're checking for a click event, then you can use jQuery to attach the event handlers so that the elements don't need to be on the page yet, you can do that by delegating the event handlers.  You do that by specifying a selector when you attach an event handler using the on method:

http://api.jquery.com/on/

So, for example, you would attach the event handler to a div that is eventually going to contain the dynamic content, but use a child selector to say that only buttons with the class "click-1" inside that div should receive the click events.  As long as the container element exists you can attach those event handlers before the dynamic content is loaded, you would attach them in the ready handler.

[iwato]

REQUEST:  Please consider the following piece of code and follow the clicking instructions.  Then, explain why the <div class='hidden_info'>...</div> is not hidden when the page is filled and cannot be shown when the user clicks on the phrase Discover more ...  I am completely baffled.  Even the animation works.

After clicking on the link please follow the following steps:

1.     Find Proxy_Link and click.
2.     Find Chronology in the navigation bar and click.
3.     Find Podcast Index ... and click.    
4.     Pass your cursor over any phrase that reads Discover more ... and click.

QUESTION:  Why would part of this work code work and not the other?

$(".hidden_info").css('visibility','hidden');
$("div.discover").mouseover(function() {
	$(this).css({"cursor": "pointer","font-weight":"800"});
	$(this).click(function() {
		$(".hidden_info").show(true);
		$(this).mouseup(function() {
			$(this).css({"color": "#ccc", "font-weight": "normal"});
		});
		$('body, html').animate({scrollTop: $(this).offset().top},800);
	});
});

This is the code that generates the relevant DIV element.  Both pieces of code are located in the $.ajax( ) success function.  The following code precedes the above code in the function.

$.each(jsonData, function(key, object){
	$('#main').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 />" + object.item_pubdate + "</div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'>Discover more ...</div><div class'hidden_info'><div class='duration'>Duration (hh:mm:ss): " + object.itunes_duration + "</div><div class='summary'>Summary: "+ object.itunes_summary + " </div></div><!-- end div.hidden_info --></div><!-- end div.paginate -->");
});

Roddy

[dsonesuk]

When the page loads any event coding is applied to elements with specific identifier at that time. Anything inserted after that, with the same identifier won't have the event coding applied to it because it did not exist on page loading. That is why you should use .on() it covers targeting elements to apply event coding when page is loaded and when new target elements are inserted afterwards. the .on() event would target #main because it should always exist on page load, as every new child element  is inserted into it, you then specifically target identifiers of this new content with the event you want.

See link for detailed instructions supplied by justsomeguy

[iwato]

OK, W3Schools, what may seem logical and understandable to you, would make sense to me, if only it matched the reality that I perceive.

Based on what you, JSG and Dsonesuk, have said, I grayed out the statement $(".hidden_info").css('visibility','hidden'); and replaced it with CSS styling in a file called podcasts.css that loads when the file loads via an HTML <link> element in the <head> element.  The style setting is .hidden_info {display: none;}.   In effect, the CSS style setting is now in place before the <div class='hidden_info" loads with the success function of the AJAX call. Still, the relevant <div> remains visible!

Now, I have nothing against using jQuery's .on( ) method.  In fact, the .click( function( ){ ... }); method that triggers the functioning style change and animation via the <div class='discover'> element in the code above is identical to the .on('click', function( ){ ... });

remain baffled.

Roddy

[dsonesuk]

if you looked at html through developer tools (i used firefox) you will see <div class'hidden_info'="">...</div>, clearly something is wrong! and it won't apply styling cause it does not exist, looking at code that produces this, it shows </div><div class'hidden_info'> which shows the '=' sign is missing, the browser will try its best to determine what you want, but its not perfect.