代码之家 › 专栏 › 技术社区 › Ali

IE 8在使用jquery的$().append()时出错

internet-explorer-8 jquery javascript

-1

Ali · 技术社区 · 15 年前

我在页面的源代码中有这个隐藏的范围:

<span id="var-form" class="hidden">
    <div class="{cls}">
        <div class="{cls}-area">
            <div class="gray-font16" style="color:#82BD0F;">{num}.</div>
            <div class="ad-form-field">Title: <img src="images/zero.gif" width="40" height="1" alt="" />
                <input type="text" id="title_{pos}" class="textbox-ad" value="{title}" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Line 1: <img src="images/zero.gif" width="28" height="1" alt="" />
                <input type="text" id="line1_{pos}" class="textbox-ad" value="{line1}" />
                <img src="images/ad-form_icon2.jpg" alt="" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Line 2: <img src="images/zero.gif" width="28" height="1" alt="" />
                <input type="text" id="line2_{pos}" class="textbox-ad" value="{line2}" />
                <img src="images/ad-form_icon.jpg" alt="" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Display Url: 
                <input type="text" id="displayUrl_{pos}" class="textbox-ad" value="{displayUrl}" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Link Url: <img src="images/zero.gif" width="15" height="1" alt="" />
                <input type="text" id="linkUrl_{pos}" class="textbox-ad" value="{linkUrl}" /></div>
            <div style="height:6px;"></div>
            <div class="ad-form-field"> <img src="images/zero.gif" width="48" height="1" alt="" />
                <span style="font-size:13px;">33 Characters</span>
                <img src="images/zero.gif" width="15" height="1" alt="" />
                <input type="submit" num="{pos}" value="" class="save-button" />
                <img src="images/zero.gif" width="10" height="1" alt="" />
                <input type="submit" num="{pos}" value="" class="delete-button" /></div>
            <div style="height:12px;"></div>
        </div>
    </div>
    </span>

如您所见,有一些特定的标签,例如 {pos} , {id} 等。

我使用以下javascript代码获取此HTML,用它们的值替换标记,并在DOM中插入新的HTML代码:

var html="<span id='ad_" + this.position + "' class='hidden'>";
html=html + $("#var-form").html() + "</span>";
var tags={};

        tags.id=self.id;
        tags.num=self.position + 1;
        tags.pos=self.position;
        tags.title=self.title;
        tags.cls=self.cls;
        tags.line1=self.line1;
        tags.line2=self.line2;
        tags.displayUrl=self.displayUrl;
        tags.linkUrl=self.linkUrl;

        $.each(tags,function(tag, val)
            {
                html=replaceAll("{" + tag + "}",val,html);
            }
        );

在Firefox和Chrome上,它工作得很好,正如预期的那样,但是在IE 8中,HTML代码改为:

<span id='ad_0' class='hidden'><DIV class=ad-form1>
<DIV class=ad-form1-area>
<DIV style="COLOR: #82bd0f" class=gray-font16>1.</DIV>
<DIV class=ad-form-field>Title: <IMG alt="" src="images/zero.gif" width=40 height=1> <INPUT id=title_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Line 1: <IMG alt="" src="images/zero.gif" width=28 height=1> <INPUT id=line1_0 class=textbox-ad value= type=text> <IMG alt="" src="images/ad-form_icon2.jpg"></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Line 2: <IMG alt="" src="images/zero.gif" width=28 height=1> <INPUT id=line2_0 class=textbox-ad value= type=text> <IMG alt="" src="images/ad-form_icon.jpg"></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Display Url: <INPUT id=displayUrl_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Link Url: <IMG alt="" src="images/zero.gif" width=15 height=1> <INPUT id=linkUrl_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 6px"></DIV>
<DIV class=ad-form-field><IMG alt="" src="images/zero.gif" width=48 height=1> <SPAN style="FONT-SIZE: 13px">33 Characters</SPAN> <IMG alt="" src="images/zero.gif" width=15 height=1> <INPUT class=save-button type=submit num="0"> <IMG alt="" src="images/zero.gif" width=10 height=1> <INPUT class=delete-button type=submit num="0"></DIV>
<DIV style="HEIGHT: 12px"></DIV></DIV></DIV></span>

如您所见,有许多遗漏的引号等,它会导致布局中断和许多其他错误发生。

我怎么修这个?

2 回复 | 直到 15 年前

Rojo 15 年前

我认为没有办法保证html()将返回呈现标记的精确副本。通过将模板标记(当然是编码的)呈现为隐藏元素的值,可以确保模板标记不会被更改。

编辑

例如,下面是用值属性编码的外部3个div:

<input id="template" type="hidden" value="&lt;div class=&quot;{cls}&quot;&gt;&lt;div class=&quot;{cls}-area&quot;&gt;&lt;div class=&quot;gray-font16&quot; style=&quot;color:#82BD0F;&quot;&gt;&lt;div style=&quot;height:12px;&quot;&gt;TEST&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;" />

然后您将构建这样的HTML字符串:

var html="<span id='ad_" + this.position + "' class='hidden'>";
html=html + $("#template").val() + "</span>";

根据您在服务器端所做的,最好将模板标记简单地写为一个javascript变量。所以你会得到:

var template = "<div class=\"{cls}\"><div class=\"{cls}-area\">"
    + "<div class=\"gray-font16\" style=\"color:#82BD0F;\"><div "
    +"style=\"height:12px;\">TEST</div></div></div>";

而这:

var html="<span id='ad_" + this.position + "' class='hidden'>" + template + "</span>";

Sky Sanders 15 年前

我正在使用 jQote 现在做模板,它在IE8上运行良好。

它最初是由resig写的。