更改通过Jquery和AJAX动态加载到DIV中的HTML页面元素的样式

Question

I have a an ajax call that loads an HTML page into a div via Ajax. 我有一个ajax调用，可通过Ajax将HTML页面加载到div中。 Once the page is loaded into the div is it possible to manipulate the content of the HTML page that was loaded. 一旦将页面加载到div中，就可以操纵已加载的HTML页面的内容。 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. 例如，将页面加载到div后，我想对ID为“ 1”的图像之一设置样式，使其周围有1个pix边框。

Below is the ajax code I used to load the content into the div 下面是我用来将内容加载到div中的ajax代码

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&campaignid=3586'
        $('.content').fadeOut('fast', loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load">Loading<br><img src="' + loadinggif + '" alt="Loading" /></div>');

        $('#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 );  
   }  
 });

} }

Then on page where this code is running I tried 然后在运行此代码的页面上我尝试了

$('#1').css('border', 'solid 1px red'); $（'＃1'）。css（'border'，'solid 1px red'）;

Here is the HTML. 这是HTML。 THis is for an email marketing application which is why I used tables 这是用于电子邮件营销应用程序的，这就是为什么我使用表的原因

 <table width="99%" border="0" cellspacing="1" cellpadding="2">    
        <tr>     
            <td><img id="1" src="http://xxx.xxx.xx.xxx/upload/66/img_2873.jpg" border="0" width="180" alt="Property Picture"></td>    
            <td><img id="2" src="http://xxx.xxx.xx.xxx/upload/DD/img_2875.jpg" border="0" width="180" alt="Property Picture"></td>    
            <td><img id="3" src="http://xxx.xxx.xx.xxx/upload/77/img_2877.jpg" border="0" width="180" alt="Property Picture"></td>    
        </tr>    
      </table>

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. 但是由于id“＃1”作为HTML流加载到div中，因此似乎无法从进行调用的页面访问。

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? 是否可以通过jquery AJAX处理加载到页面中的元素ID＃1的css属性，还是必须使用iFrame？

Thanks in advance. 提前致谢。

Answer 1

$("...").css works on responseText from $.ajax appended to a div : $（“ ...”）。css对附加到div $.ajax responseText起作用：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      function reskin()
        {
        $("#betamax").html(String(arguments[0].responseText).match(/<p.*/g)[0]);
        $("#betamax p").css("color","blue");
        }

      function beta()
        {
        var alpha = alpha || $.ajax( {complete: reskin} );
        $("body").append(String('<div id="betamax"></div>') );
        }
      beta();
    </script>
  </body>
</html>

更改通过Jquery和AJAX动态加载到DIV中的HTML页面元素的样式

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-03-05 23:00:16

更改通过Jquery和AJAX动态加载到DIV中的HTML页面元素的样式

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-03-05 23:00:16

解决方案1
1 已采纳 2012-03-05 23:00:16