Cannot hide loaded HTML using JQuery/AJAX

I am using JQuery/AJAX to load some HTML data but I then want to apply a JQuery method to hide some of the loaded HTML. Unfortunately the JQuery method does not seem to apply to the loaded HTML.

Here is a simple file I am loading:
http://www.dressorganic.co.uk/ajaxonload/filetoload.htm

Here is the page to load the file:
http://www.dressorganic.co.uk/ajaxonload/test1.htm

If you view source you can see I load the file then immediately try to hide id "tohide" but nothing happens.

I am familiar with the JQuery "on" method but only know how to apply it on an interactive event such as click. For example:
$("body").on("click", ".link", function() {...

But I am not sure how to apply it immediately after loading.
mike99cAsked:
Who is Participating?
 
Richard FrancisConnect With a Mentor Commented:
You can use the callback function of the .load event to hide the content:

	$(document).ready(function(){
				
	    $('#receivingcontainer').load('/ajaxonload/filetoload.htm #datacontainer', function() {
  			$('#tohide').hide();
		});  
	                              
    });

Open in new window


edit: Sorry I should also have given you the link to the relevant jQuery doc, so here it is http://api.jquery.com/load/
0
 
leakim971PluritechnicianCommented:
add a bit of CSS in your page, so by default it hidden :

<style>
#tohide {
    display:none;
}
</style>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.