这个jQuery代码在IE6和IE7中失败了吗？ [英] What in this jQuery code is failing for IE6 and IE7?

问题描述

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

 < div class =payment> 
< input type =textname =payments [0] [：date_paid]id =payments_0_：date_paid> 
< input type =textname =payments [0] [：amount_paid]id =payments_0_：amount_paid> 
< / div> 
 
< div class =paymentstyle =display：block;> 
< input type =textname =payments [1] [：date_paid]id =payments_1_：date_paid> 
< input type =textname =payments [1] [：amount_paid]id =payments_1_：amount_paid> 
< / div> 
  

在IE6和IE7中，IETester的IE Intestited Source Code如下所示：

 < 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：blockjQuery1297204711741 =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。

<点击（函数（）{
if（$（。payment：last）。find（input）。val（）。pre> $（。add_another ）（）;！=！）{
var $ newdiv = $（。payment：last）。clone（true）;
$ newdiv.find（'input'）。each（function（）{
var $ this = $（this）;
$ this.attr（'id'，$ this.attr（'id'）。replace（/ _（\d +）_ /，function $'$'$'$'$'$'$（$'$' （'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（）;
};
返回false;
}）;


解决方案

您必须使用outerHTML克隆！ Yikes！

  var $ this = $（this）; 
 if（！$。browser.msie || parseInt（$。browser.version）> 7）{
 $ this.attr（'id'，$ this.attr（'id'）。替换（/ _（\ d +）_ /，函数（$ 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 +/>）; 
 
}; 
  

This piece of jQuery duplicates an item in a form. It works in all browsers except for IE6 and IE7. This is because when it duplicates the form -- it does not increment the name attribute (as it does in all other browsers ) :

<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>

In IE6 and IE7, IETester's IE Interepreted Source Code looks like this :

<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>

This is the jQuery that produces it.

$(".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;
});

解决方案

You have to clone using the outerHTML! Yikes!

      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 + " />");

      };

这篇关于这个jQuery代码在IE6和IE7中失败了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！