Question

我的代码是：

<!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复选框，则将td添加到table2，否则从table2中删除td，但$("#table2 #"+id).remove();在ie7中不起作用，我将其替换为$("#"+id,$("#table2")).remove();它可以正常工作。谁能告诉我为什么？

Answer 1

该问题特定于IE7可能是因为它不支持querySelectorAll，因此使用了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
}

但你说这有效：

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

这可能是因为Sizzle这样做了：

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

然后是这样的事情：

el.getElementsByTagName('*')

后面是ID的过滤器。这只是猜测，但无论如何都不相关，因为必须先解决重复的ID。

jquery祖先后代选择在IE7中不起作用？

1 个答案: