jQuery是否重写了我的CSS属性？

Question

我有一个搜索结果网页,将结果分成多个页面.而不是在用户从一个搜索结果页面导航到下一个页面时重新加载整个页面,我正在使用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>

但是,当我通过.html()jQuery函数重新加载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对引号有效.将空格更改为"+"并不能解决问题.

Answer 1

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

<div style="background-image:url(/images/image+one.png);">