0

我的代码是：

<!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();它可以正常工作。谁能告诉我为什么？

4

1 回答 1

2

这个问题是 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。

于 2012-05-10T02:49:31.207 回答