jQuery v1.7.1、IEとChrome/FFの 'this'の内容が異なります

jQuery、FF/Chrome、IEのバグか、予期せぬ動作か分かりません。残念ながら、次のスクリプトが異なるブラウザで同じ結果を出すべきかどうかを判断するうえで、jQueryはうまくいきません。jQuery v1.7.1、IEとChrome/FFの 'this'の内容が異なります

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
    <div id="c"> 
     <form name="login" action="https://my_domain.com/my_login_script.php" method="post"> 
      <input type="text" name="email" value="sss" /> 
      <input type="text" name="password" value="pass" /> 
      <input type="submit" value="go" /> 
      </form> 
    </div> 

    <script type="text/javascript"> 
     $("#c").find('form[name=login]').submit(function() { 
      alert($(this).serialize()); 
      $('#c').html(""); 
      alert($(this).serialize()); 
      alert($(this).html()); // empty string in IE, contents of <form> under FF 
      return false; 
     }); 
     </script> 
</body> 
</html>

それは何：イベントハンドラの形式ではdivの中に含まれる「#C」

のログイン」を形成するためのイベントを提出するための

割り当てハンドラは、シリアル化され、アラートボックスに表示されます。
divの内容 "#c"を空文字に変更しました。
フォームが再びシリアル化され、アラートボックスに出力文字列が表示されます。
内容は、 'これが' 警告ボックスに表示されている - それはIEでの空だとFF /クロームアラートボックスに

は示してFF/Chromeで一部のHTMLを持っています

メール= SSS &パスワード=パス
電子メール= sss &パスワード=パス//上記と同じ出力、 'これは変更されていませんか？しかし、IE9では

：

メール= SSS &パスワード=
"" //空の文字列

それはjQueryのバグです渡しますか？

出典

2012-03-07 matt

あなたは$を使用することができます（この）の.html（ ''）の代わりに$の（ '＃のC'）？私はそれを試して、これはクロムの2番目の警告で空の戻ります。 – Andy

この問題は、jQueryがブラウザ内で切り離されたフォームのシリアライズを処理する方法と思われます。 '$（ '＃c'）の代わりに' $（this）.detach（）; 'を使用するとどうなりますか？html（" "）;'？ –

Andy：私はできますが、ここで問題を解決しようとはしていません。私はこれを偶然見つけ、バグかどうか疑問に思っていました。 – matt

ブラウザが.innerHTMLのプロパティをjQueryのバグ（jQueryがinnerHTMLを呼び出すため、ブラウザがDOMツリーを構築/再構築するために使用する）よりも多く処理していると思います。この例を参照してください：http://jsfiddle.net/bhKCu/1/（jQueryバグの場合は、$.html()の代わりにinnerHTMLを使用するブラウザーに関係なく同じ動作をする必要があります）。

From jQuery.html():

この方法は、ブラウザのinnerHTMLプロパティを使用しています。いくつかのブラウザは、提供されたHTMLソースを正確に複製するDOMを生成しません。 jQueryの1.7.1から

：

html: function(value) { 
     if (value === undefined) { 
      return this[0] && this[0].nodeType === 1 ? 
       this[0].innerHTML.replace(rinlinejQuery, "") : 
       null; 
    // See if we can take a shortcut and just use innerHTML 
    } else if (typeof value === "string" && !rnoInnerhtml.test(value) && 
     (jQuery.support.leadingWhitespace || !rleadingWhitespace.test(value)) && 
     !wrapMap[ (rtagName.exec(value) || ["", ""])[1].toLowerCase() ]) { 

     value = value.replace(rxhtmlTag, "<$1></$2>"); 

     try { 
      for (var i = 0, l = this.length; i < l; i++) { 
       // Remove element nodes and prevent memory leaks 
       if (this[i].nodeType === 1) { 
        jQuery.cleanData(this[i].getElementsByTagName("*")); 
        this[i].innerHTML = value; // HERE 
       } 
      } 

     // If using innerHTML throws an exception, use the fallback method 
     } catch(e) { 
      this.empty().append(value); 
     } 

    } else if (jQuery.isFunction(value)) { 
     this.each(function(i){ 
      var self = jQuery(this); 

      self.html(value.call(this, i, self.html())); 
     }); 

    } else { 
     this.empty().append(value); 
    } 

    return this; 
},

出典

2012-03-07 12:24:30 Benno

ありがとうございます。私はそれがjQueryのバグではないかどうか確信していません。私はjQueryから、ブラウザ固有のコードからユーザを保護することを期待しています。 jQuery.html（）のドキュメントもこれを解決していません。返された変換、まだ何とか同等のhtmlは空の文字列を返すとはかなり異なります。 – matt

True - jQueryがinnerHTMLの振る舞いを正規化するべきですか？これはおそらく、私はそれが特定の他のJS関数クロスブラウザの動作を正常化すると信じて、本当です。 – Benno

jQuery v1.7.1、IEとChrome/FFの 'this'の内容が異なります

答えて

関連する問題