title: change style of an HTML page element that was loaded dynamically into a DIV via Jquery and AJAX
body: <p>I have a an ajax call that loads an HTML page into a div via Ajax. Once the page is loaded into the div is it possible to manipulate the content of the HTML page that was loaded. For instance, once the page is loaded into the div I would like to style one of the images with the ID "1" to have a 1 pix border around it. </p>
  
  <p>Below is the ajax code I used to load the content into the div</p>
  
  <pre><code>function getMessage(){
  var sTitle = null;
  var sBody = null;
  var sImage = null;
  sImage = GetImageID();  
   $.ajax({  
      type: "POST",  
      url: "xt_getAJAXData.asp",  
      data: {"cid":"3586",
      "elid"          :"2425",
      "sText"         : sBody,
      "title"         : sTitle,
      "img"           : sImage
     },
     success: function(resp){  
       // we have the response  
       var toLoad = 'sys_show_template.asp?step3=1&amp;campaignid=3586'
          $('.content').fadeOut('fast', loadContent);
          $('#load').remove();
          $('#waiting').append('&lt;div id="load"&gt;Loading&lt;br&gt;&lt;img src="' + loadinggif + '" alt="Loading" /&gt;&lt;/div&gt;');
  
          $('#load').fadeIn('normal');
          function loadContent() {
              $('.content').load(toLoad, '', function(response, status, xhr) {
                  if (status == 'error') {
                      var msg = "Sorry but there was an error: ";
                      $(".content").html(msg + xhr.status + " " + xhr.statusText);
                  }            
              }).fadeIn('slow', hideLoader());
          }
          function hideLoader() {
              $('#load').fadeOut('fast');
          }
          return false;
     },  
     error: function (xmlHttpRequest, textStatus, errorThrown){  
       alert('Error: ' + xmlHttpRequest + " "+ textStatus + "" + errorThrown );  
     }  
   }); 
  </code></pre>
  
  <p>}</p>
  
  <p>Then on page where this code is running I tried </p>
  
  <p>$('#1').css('border', 'solid 1px red');</p>
  
  <p>Here is the HTML. THis is for an email marketing application which is why I used tables </p>
  
  <pre><code> &lt;table width="99%" border="0" cellspacing="1" cellpadding="2"&gt;    
          &lt;tr&gt;     
              &lt;td&gt;&lt;img id="1" src="http://xxx.xxx.xx.xxx/upload/66/img_2873.jpg" border="0" width="180" alt="Property Picture"&gt;&lt;/td&gt;    
              &lt;td&gt;&lt;img id="2" src="http://xxx.xxx.xx.xxx/upload/DD/img_2875.jpg" border="0" width="180" alt="Property Picture"&gt;&lt;/td&gt;    
              &lt;td&gt;&lt;img id="3" src="http://xxx.xxx.xx.xxx/upload/77/img_2877.jpg" border="0" width="180" alt="Property Picture"&gt;&lt;/td&gt;    
          &lt;/tr&gt;    
        &lt;/table&gt;
  </code></pre>
  
  <p>But since the id "#1" is loaded into the div as an HTML stream it does not appear to be accessible from the page that made the call. </p>
  
  <p>Is is possible to manipulate the css properties of the element ID #1 loaded into page via jquery AJAX or do I have to use an iFrame?</p>
  
  <p>Thanks in advance. </p>