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

【问题标题】：change style of an HTML page element that was loaded dynamically into a DIV via Jquery and AJAX更改通过 Jquery 和 AJAX 动态加载到 DIV 中的 HTML 页面元素的样式
【发布时间】：2012-02-15 19:59:25
【问题描述】：

我有一个通过 Ajax 将 HTML 页面加载到 div 中的 ajax 调用。一旦页面加载到 div 中，就可以操作加载的 HTML 页面的内容。例如，一旦将页面加载到 div 中，我想为其中一个 ID 为“1”的图像设置样式，使其周围有一个 1 像素的边框。

下面是我用来将内容加载到 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 );  
   }  
 });

}

然后在运行此代码的页面上我尝试了

$('#1').css('border', 'solid 1px red');

这里是 HTML。这是一个电子邮件营销应用程序，这就是我使用表格的原因

 <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>

但由于 id "#1" 作为 HTML 流加载到 div 中，因此似乎无法从发出调用的页面访问。

是否可以通过 jquery AJAX 操作加载到页面中的元素 ID #1 的 css 属性，还是必须使用 iFrame？

提前致谢。

【问题讨论】：

ID 不能以数字开头。
谢谢我不知道。但是，ID 的名称与问题的目的无关，我可以将 id 设为任何内容。
请显示您要更改的 HTML。
刚刚在帖子中添加了 HTML 片段
@Diodeus，they can in HTML5.

标签： javascript ajax dom jquery

【解决方案1】：

$("...").css 在 responseText 上工作，从 $.ajax 附加到 div:

<!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>

【讨论】：