Question

这是我的HTML结构：

<table id="items" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <td> </td>
            <td>Name</td>
            <td>Description</td>
            <td>Location</td>
        </tr>
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </td>
            <td><input type="text" id="addName"></td>
            <td><input type="text" id="addDescription"></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

这是我的jQuery代码：

function getTable(){
    var args = new Object();
    args.op = "getTable";
    $.post("./service.php", args , function(data)
        {
            var dataObj = JSON.parse(data);
            for(var i = 0; i<dataObj.length; i++){
                $('table#items tbody').append("<tr class=\"items_tr\" id=\"item"+dataObj[i].sn+"\"><td>"+dataObj[i].sn+"</td><td>"+dataObj[i].name+"</td><td>"+dataObj[i].description+"</td><td>"+dataObj[i].belonged+"</td></tr>");
        }
    });
}

getTable();

$('tbody').children("tr").hide();
$("tbody tr").hide();
$("tr.items_tr").hide();

最后3个陈述根本不起作用。
无法选择创建的＆lt; tr＆gt; s 为什么以及如何选择它们？

$("tr").hide();

这个只隐藏＆lt; tr＆gt;里面＆lt; thead＆gt;，已经创建的东西。

更多问题 - .each（）函数怎么样？
我想在每个td标签上绑定一个click事件，但我再次失败了.. 如何迭代所有新添加的＆lt; td＆gt; s？

Answer 1

要使最后三个语句有效，元素必须存在。您正在执行之前收到Ajax响应的方法。添加元素后（即循环后），在$.get回调中移动调用。

有点相关（因为它们解释了异步内容的工作原理）：

Answer 2

如果您尝试在事件上隐藏这些元素，请将它们添加到事件处理程序，例如：

$(document).ready( function () {
        getTable();

        $(element).on('click', function () {
            $('tbody').children("tr").hide();
            $("tbody tr").hide();
            $("tr.items_tr").hide();
        });
     )};

如果您在调用getTable函数后尝试隐藏这些元素，则将3个函数添加到$ .post成功函数

代码应如下所示：

function getTable(){
var args = new Object();
args.op = "getTable";
$.post("./service.php", args , function(data)
    {
        var dataObj = JSON.parse(data);
        for(var i = 0; i<dataObj.length; i++){
            $('table#items tbody').append("<tr class=\"items_tr\" id=\"item"+dataObj[i].sn+"\"><td>"+dataObj[i].sn+"</td><td>"+dataObj[i].name+"</td><td>"+dataObj[i].description+"</td><td>"+dataObj[i].belonged+"</td></tr>");
    }
        $('tbody').children("tr").hide();
        $("tbody tr").hide();
        $("tr.items_tr").hide();
});
}

 getTable();

Answer 3

如果在document.ready之后创建了元素，那么jquery会绑定document.ready上的事件，那么你需要使用jquery的.bind（）函数为这些事件注册这些元素。但请务必先注销alredy附加元素。使用unbind（）;

参考bind和unbind函数。

jQuery - 无法选择动态创建的元素

3 个答案: