Question

我有一个Javascript应用程序，我需要检索一个HTML文件来模板化它。我现在这样做的方式是：

var _$e = null;
$.ajax({                               
  type: "GET",                         
  url: "/static/jobs_overview.html",   
  async: false,                        
  dataType: "xml",                     
  success: function (xml) {            
    _$e = $(xml.documentElement);      
  }                                    
});

这似乎有效，但出于某种原因，我没有在_$e中获得正确的jQuery对象。我知道因为jQuery完成的样式在某些时候会丢失，但是，当我设置断点成功时，这就是我所看到的：

> _$e
[<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>]
> _$e.width()
TypeError: Cannot read property 'position' of null

但是，当我手动复制HTML字符串并将其转换为success中的jQuery对象时，输出为：

> $('<div class="hello" style="background-color:#FFD700;height:200px;width:100px;"><p> Hi </p></div>').width()
100

似乎返回的xml对象没有正确转换为jQuery（或者jQuery没有正确读取对象的所有属性 - 假设HTML正在渲染但样式不是）。

xml对象是：

> xml
#document
<div class="hello" style="background-color:#FFD700;height:200px;width:100px;">…</div>

如何正确地将xml（或HTML文件）呈现为jQuery对象？

Answer 1

可能是因为您正在抓取数据类型XML吗？您是否尝试过将数据类型设置为HTML（或者没有），然后执行此操作（忽略.documentElement并假设整个glomp是您的HTML）：

$.ajax({                               
  type: "GET",                         
  url: "/static/jobs_overview.html",   
  async: false,                        
  dataType: "html",                     
  success: function (data) {            
    _$e = $(data);              // we are getting back HTML, 
    console.log(_$e.width());   // jQuery is fine with html globs
  }                                    
});

Answer 2

这可能是因为您将其作为XML引入。尝试将dataType设置为html，看看是否有任何区别。

听起来.load()可能更符合您的需求：http://api.jquery.com/load/

使用AJAX检索HTML文件

2 个答案: