ホームページ  >  記事  >  ウェブフロントエンド  >  IE7 での jquery のセレクターの問題により、fail_jquery への追加が発生する問題の解決策

IE7 での jquery のセレクターの問題により、fail_jquery への追加が発生する問題の解決策

WBOY
WBOYオリジナル
2016-05-16 15:20:401256ブラウズ

1、次のような HTML があります

コードをコピーします コードは次のとおりです:

284774e381c812f48249ca70ec6ff891 b3cb001ffa23a62d3d148e67f026e3f1 92cee25da80fac49f6fb6eec5fd2c22a
ca745a59da05f784b8811374296574e1
271cb3d2ff227ca6331ee41e81293d65
d8ae53e7ce6c3650777155b1bbacb24c 16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68



2. jquery を使用して tbody の下にコンテンツを動的に入力します。コードは次のとおりです。

コードをコピーします コードは次のとおりです: $("#pending table tbody").empty().append(th).append(html);


このコードは、ie7 以下のバージョンでは問題が発生します。jquery は正しい dom 位置を見つけられず、#pending table tbody を通じてコン​​テンツを追加できません。修正が必要です。修正後のコードは次のとおりです

コードをコピーします コードは次のとおりです: $("table tbody").empty().append(th).append(html);


#pending を削除し、テーブル tbody から直接 dom を検索します
3. カスケードセレクターはよくあることですが、なぜ IE7 でこのような問題が発生するのでしょうか? それとも、div の下にネストされたテーブル tbody の HTML の記述方法が十分ではないのでしょうか?

さらに追加してみましょう:

IE で jquery append を使用する際の注意点

変更 (以下):
$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //在IE7下无法显示,在火狐下没有问题。。。。。
      $('#Content').append('<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>');

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

コンテンツをパラメータにコピーするだけであり、HTML コンテンツを直接使用しないでください。
$(document).ready(function() {
   $.ajax({
     url: 'Cutepage.htm',
     dataType: 'json',
     data: 'type=Init&PageSize=' + EachPage + '&PageIndex=1',
     success: function(msg) {

      //修改后...(这样就没有问题了,可以看出Jquery对html标签是比较敏感的,以后需要注意........) 
      var pageContent = '';  
       pageContent += '<table border="2">';
       pageContent += '<tr><td width="19%"> 商品编号</td><td width="15%">商品名字</td><td width="20%">供应商商编号</td><td width="30%">商品种类编号</td><td width="10%">单价</td></tr>';
       pageContent += '</table>';      
       $('#Content').append(pageContent );

     },
    error: function(x) { alert("服务器错误代码:" + x.status); $('#Loading').hide(); }
   });
 });

jQuery の append メソッドは接続などの HTML 属性をサポートしていません

今日プログラムを書いていて、a4b561c25d9afb9ac8dc4d70affff419e388a4556c0f65e1904146cc1a846bee などの HTML を追加したいのですが、次のようなリンクが含まれた HTML に遭遇しました。 🎜>

コードをコピーします

コードは次のとおりです: $("#test").append("771ffaf5277073360b429b7cfaa0dd37test5db79b134e9f6b82c0b36e0489ee08ed");

Firefox では問題ありませんが、IE6、IE7、IE8 では固まり、接続せずにテキストコンテンツのみが表示されます。 Google への準備をしていましたが、Google.com にログインできなくなったことがわかりました。基本的に、Google.cn で見つけたページは収集サイトのジャンク記事でいっぱいで、とても憂鬱でした。長い間取り組んだ後、jQuery 独自の append 関数に問題があるという記事を見つけました。この関数には、HTML の解析と分析に似た独自のステートメントがありますが、リンクやタグが発生します。タグが完全に閉じられていない、またはカスタマイズされているため、jQuery がそれらを認識できません。私が持っている js ライブラリは圧縮版なので、もう頭がクラクラして老子子のソースコードを見たくないです。次のように、 a タグの要素を作成して直接挿入するだけです:

コードをコピーします

コードは次のとおりです: $(document.createElement(‘a’)).attr({"href":"#", "id": ‘#mylink’}).appendTo("#test");

次に、このリンクにコンテンツを添付します:

コードをコピーします

コードは次のとおりです: $(‘#mylink’).text("テスト");
ねえ、疲れてる?明日は時間があれば、jQuery のソース コードがどのように記述されているか見てみましょう。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。