0

我有一个搜索结果网页，它将结果分成多个页面。当用户从一个搜索结果页面导航到下一个搜索结果页面时，我没有重新加载整个页面，而是使用 jQuery ajax 调用来获取页面（通过“GET”请求），提取包含搜索结果的元素，然后换掉html。

这很好用，但我发现我的 background-image CSS 属性有问题。一些背景图像名称包含空格，因此我将 url 用引号括起来，如下所示：

<div style="position: absolute; right: 0; bottom: 0; 
            width: 30px; height: 30px; 
            background-image: url('Images/Image One_small.png');
            background-repeat: no-repeat;" 
     title="Image One">
</div>

但是，当我通过 jQuery 函数重新加载 HTML 元素时.html()，似乎 HTML 被重新格式化（包括去除引号），如下所示：

<DIV style="BACKGROUND-IMAGE: url(Images/Icons/Image One_small.png); POSITION: absolute; WIDTH: 30px; BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 30px; RIGHT: 0px" title="Image One"></DIV>

Chrome 似乎处理得很好，但 IE8 令人窒息（无法解析背景图像）。

该html()函数是否重写 HTML 或 CSS 属性？如果是这样，是否有更好的解决方案？我不想重命名图像，因为名称是由用户输入驱动的（可以合法地包含空格）。

这是我的ajax调用：

var l_url = "SearchResults.aspx?pg=" + pageNo;
$.ajax({
    type: "GET",
    dataType: "html",
    url: l_url,
    beforeSend: function(jqXHR, settings) {
        $("#WhiteoutDiv").css("display", "block");
    },
    success: function(data, textStatus, jqXHR) {
        $("#SearchResultsDiv").html($("#SearchResultsDiv", data).html());
        $("#WhiteoutDiv").css("display", "none");
        // The below line is for debugging. It selects one of the search result
        // elements and displays the html so I can see what's going on. Chrome's
        // developer tools give conflicting results.
        alert($(".ReportItem", data).html());
    },
    error: function(textStatus, jqXHR) {
        window.location = l_url;
    }
})

附录

需要明确的是，在通过 jQuery AJAX 重新加载 DIV 之前，一切都运行良好（并且与我的旧的非 jQuery AJAX 实现完美运行）。路径正确，并且 CSS 带引号有效。将空格更改为“+”并不能解决问题。

4

2 回答 2

6

您应该始终使用+或%20代替 URL 中的空格：

<div style="background-image:url(/images/image+one.png);">
于 2012-11-20T16:28:15.883 回答
0

.html()在文档中找到了这个（重新阅读后）：

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

I think IE8 is responsible for mangling my HTML, not jQuery directly. I will have to re-engineer my solution to account for this.

于 2012-11-20T18:40:21.817 回答