Question

我有一个页面，可以创建包含一些搜索条件字段的相同行数。我创建了模板div，当用户按下addButton时会填充该模板div。在我的js函数中，我正在用正确的值替换id和name，并添加正确的订单号，如1,2,3等。该功能在FireFox，Chrome和Safari下运行良好。但它没有任何警告就在IE下失败了。

    var $rowtp = $('div#partnerFactory-template')
            .html()
            .replace(/id="__prefix__/g, "id=\"truckSearcherFilter_partnerFactoryRow")
            .replace(/name="__prefix__/g, "name=\"truckSearcherFilter.partnerFactoryRow");

var $nrow = $('div#partnerFactory-list').append($rowtp)

重播后这是正确的Firefox结果

<input id="truckSearcherFilter_partnerFactoryRow_0__partnerName" class="ui-corner-all ui-widget-content ui-autocomplete-input" type="text" value="" name="truckSearcherFilter.partnerFactoryRow[0].partnerName" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

这就是我在IE中可以看到的

<INPUT id=__prefix___0__partnerName class="ui-corner-all ui-widget-content" type=text name=__prefix__[0].partnerName jQuery17206032578406930051="64">

任何人都可以看到我做错了什么？

此致扬

Answer 1

依赖于innerHTML（或在这种情况下，.html()）吐出的内容是a bad idea。您可以从输出中看到内部IE不会打扰单字属性的引号（这可能表示您没有添加DOCTYPE，因为这是Quirks Mode行为）。

当我尝试从内联onClick属性中解析参数时，我遇到了类似的问题。其他人在尝试解析getComputedStyle().color并期望#RRGGBB实际获得rgb(R,G,B)时遇到问题。

解决方案如下：

var clone = document.getElementById('partnerFactory-template').cloneNode(true),
    inputs = clone.getElementsByTagName('input'), l = inputs.length, i,
    target = document.getElementById('partnerFactory-list');
for(i=0; i<l; i++) {
    inputs[i].name = inputs[i].name.replace("__prefix__","truckSearcherFilter_partnerFactoryRow");
    inputs[i].id = inputs[i].id.replace("__prefix__","truckSearcherFilter_partnerFactoryRow");
}
while(clone.firstChild) target.appendChild(clone.firstChild);

请注意缺少jQuery，因此性能大大提高。不客气;）

在IE中替换JavaScript

1 个答案: