Using jQUery hide() on newly created dom elements

Question

I am relatively new to jQuery. What I have is an app that is displaying a list of content items from the database in a table.

If I click the title link of the page, it will load the page to edit in a tab (clicking teh tab lets me view that form to edit).

My problem is that in using .load and creating the html inside an empty div, my css that was previously hidden by jQuery is no longer being hidden in this new form.

For example, on the same page, I have a div with the class error. This is hidden. I click the title to edit, the page loads in an empty div, and the divs with error as a class are not hidden.

Is there a way around this to get these elements hidden?

Answer 1

Here is the code that I always use when loading content from other url into a section of current page:

jQuery(function($){
  $("#edit").click(function(){
    //display loading message in target div, it's better have animation gif
    $('#target').html('<img src="PATH/loading.gif" alt="" /> Loading edit form...');
    //request the edit form using AJAX
    $.get(EDIT_FORM_URL,
      {},
      function(data){
        //display data to target div
        $('#target').html(data);
        //if the error div still displayed, do this
        $(".error").hide();
      });
  });
});

I never use .load. I prefer to use $.get and $.post instead for more control, but not as complex as $.ajax.

Hope this help. If you still get a weird result, post the code or URL here, so other SO member can help you more accurately.