2012-05-10 11 views
0

私のコードは次のとおりです。非常にシンプルなこのコードjQuery ancestor descendant selectがIE7では機能しませんか?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
    <meta charset="utf-8"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $("#table1 tr:gt(0) input[type='checkbox']").bind("click",function(){ 
       var id= $(this).attr("id"); 
       var name=$(this).parent().next("td").text(); 

       if($(this).is(":checked")){ 
        $("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>"); 
       } 
       else{ 
        $("#table2 #"+id).remove();//why this not work in IE7? 
        //$("#"+id,$("#table2")).remove();//this work well 
       } 
      }) 
     }); 
    </script> 
</head> 
<body> 
    One: 
    <table id="table1" border="1"> 
     <tbody> 
      <tr><th></th><th>name</th></tr> 
      <tr><td><input type="checkbox" id="Checkbox1" /></td><td>jim</td></tr> 
      <tr><td><input type="checkbox" id="Checkbox2" /></td><td>tom</td></tr> 
     </tbody> 
    </table> 
    <br/> 
    Two: 
    <table id="table2" border="1"> 
     <tbody> 
      <tr><th>name</th></tr> 
     </tbody> 
    </table> 
</body> 
</html> 

、TABLE1のチェックボックスがチェックされている場合は、table2のにTDを追加し、そうでない場合は表2からTDを削除しますが、$("#table2 #"+id).remove();はIE7で動作しない、私は$("#"+id,$("#table2")).remove();にそれを置き換えることができうまくできた。なぜ私に教えてくれるの?

+0

HEADに追加してみてください: ' - <スクリプトSRC = "http://html5shim.googlecode.com/svn/trunk/html5.js"> <[IE 9 LTの場合]!>'( URLの後の最後の空白を削除する) –

答えて

2

この問題は、おそらくquerySelectorAllをサポートしていないため、IE7に固有の問題であるため、Sizzleが使用されています。

見た目からは、既存の要素と同じIDを共有する新しい要素を作成しています。 IDは一意でなければなりません。したがって、重複がある場合にDOM選択が機能することは期待できません。

// Here you're getting the ID of the element that was clicked 
var id= $(this).attr("id"); 
var name=$(this).parent().next("td").text(); 

if($(this).is(":checked")){ 

    // Here you're creating a new element with the same ID!!! 
    $("#table2").append("<tr id="+id+"><td>"+name+"</td></tr>"); 
} 
else{ 
    $("#table2 #"+id).remove();//why this not work in IE7? 
    //$("#"+id,$("#table2")).remove();//this work well 
} 

しかし、あなたはこの作品を言う:

var el = document.getElementById('table2'); 

そして、このようないくつかのこと:

el.getElementsByTagName('*') 

が続きますシズルがこれをやっているので、おそらくです

$("#"+id,$("#table2")).remove(); 

IDのフィルターでそれはちょうど推測ですが、重複IDが最初に解決されなければならないので、それはあまり関連しません。

関連する問題