IE6 和 IE7 的这个 jQuery 代码中的什么失败了？答案

【问题标题】：What in this jQuery code is failing for IE6 and IE7?IE6 和 IE7 的这个 jQuery 代码中的什么失败了？
【发布时间】：2011-02-08 22:50:06
【问题描述】：

这段 jQuery 复制了表单中的一个项目。它适用于除 IE6 和 IE7 之外的所有浏览器。这是因为当它复制表单时——它不会增加 name 属性（就像在所有其他浏览器中一样）：

<div class="payment">
   <input type="text" name="payments[0][:date_paid]" id="payments_0_:date_paid">
   <input type="text" name="payments[0][:amount_paid]" id="payments_0_:amount_paid">
</div>

<div class="payment" style="display: block;">
   <input type="text" name="payments[1][:date_paid]" id="payments_1_:date_paid">
   <input type="text" name="payments[1][:amount_paid]" id="payments_1_:amount_paid">
 </div>

在 IE6 和 IE7 中，IETester 的 IE 解释源代码如下所示：

<DIV class=payment jQuery1297204711741="16">
  <INPUT id=payments_0_:date_paid value=3/27/2008 name=payments[0][:date_paid] jQuery1297204711741="10"> 
  <INPUT id=payments_0_:amount_paid value=100 name=payments[0][:amount_paid] jQuery1297204711741="14">
</DIV>

<DIV class=payment style="DISPLAY: block" jQuery1297204711741="27">  
  <INPUT id=payments_1_:date_paid value=4/2/2008 name=payments[0][:date_paid] jQuery1297204711741="21">
  <INPUT id=payments_1_:amount_paid value=100 name=payments[0][:amount_paid] jQuery1297204711741="25"> 
</DIV>

这是产生它的 jQuery。

$(".add_another").click(function(){
  if ($(".payment:last").find("input").val() != "") {
    var $newdiv = $(".payment:last").clone(true);
    $newdiv.find('input').each(function() {
        var $this = $(this);
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
        $this.val('');
    });
    $newdiv.find('textarea').each(function(){
      var $this = $(this);
      $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
          return '_' + (+$1 + 1) + '_';
      }));
      $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
          return '[' + (+$1 + 1) + ']';
      }));
      $this.css("color","#cccccc");
    });
    $newdiv.insertAfter('.payment:last').hide().slideDown();
  };
  return false;
});

【问题讨论】：

我不明白问题出在哪里。究竟是什么失败了？
IE6 和 IE7 HTML 中的 name 属性不增加其编号。
在@Trips 评论之前发表的关于 name 属性的评论...现在已删除 :)
可能是您在名称属性[ 和] 中使用的无效字符（在HTML 4 中）存在问题。不过不确定。编辑：我可能错了。它们对 ID 无效，但我可以获得代码来验证名称中的那些。只是不确定。
旧 IE 不允许您更改使用 document.createElement() 创建的元素的“名称”属性 - 当元素作为 .cloneNode() 的副产品创建时，同样的限制可能适用。

标签： jquery html forms internet-explorer-7

【解决方案1】：

您必须使用外层HTML 进行克隆！哎呀！

      var $this = $(this);
      if (!$.browser.msie || parseInt($.browser.version) > 7) {
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
      } else {
        foob_name = $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        });
        foob_id = $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));

        $this.attr("outerHTML", "<input type='test' name=" + foob_name + " id=" + foob_id + " />");

      };

【讨论】：

您可能想尝试使用原生的setAttribute() 而不是.attr()。 this.setAttribute( 'name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) { return '[' + (+$1 + 1) + ']';}));