这个jQuery代码在IE6和IE7中失败了吗

这个jQuery代码在IE6和IE7中失败了吗

本文介绍了这个jQuery代码在IE6和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中失败了吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 05:35