JQuery - How to show / hide dynamically generated html elements

Question

I have the following code. The html elements with class .acc_container are created dynamically through an AJAX call, so they do not exist when the code $('.acc_container').hide(); . Is there something I can do here that looks like a .live function to bind an event?

 $(document).ready(function () { $('.acc_container').hide(); $.ajax({ type: 'GET', url: 'Sample.xml', dataType: 'xml', success: function (xml) { //Tags with ".acc_container" class created here 

Answer 1

You can easily manage it through CSS .

 .acc_container{ display:none; } 

Whenever you want to show , use jQuery $(".acc_container").show();

Answer 2

I like the answer of ShankarSangoli, but just keep in mind that ALL containers with this class will be displayed, not just the last ... You might want to control visibility via ID, not the class if you can.

Answer 3

You can hide the created item in the AJAX callback function.

 $(document).ready(function () { $.ajax({ type: 'GET', url: 'Sample.xml', dataType: 'xml', success: function (xml) { //Tags with ".acc_container" class created here **$('.acc_container').hide();** });