javascript - Jquery 无法访问 Ajax 创建的元素

Question

我有一个

1. html 表格(内有 tbody)

2. jquery 函数1:$.ajax - 从数据库获取数据并用数据行填充表格(每行是 tr 和 tds)

3. jquery函数2:统计表的行数( $('tbody').find('tr').length )

所以 2 工作正常，用行填充 1，但 3 不起作用(尽管它适用于表格，“手动”填充，例如不适用于 ajax 填充的表格)。

注意:当我 console.log($('table')[0]) 返回时:

<table>
<tbody> 
<tr> <td>1</td> </tr>
<tr> <td>2</td> </tr>**
</tbody> 
</table>

当console.log($('tbody')[0])返回时:

<tbody></tbody>

(里面没有看到 trs!)

我知道这与 Ajax 动态内容有关。

• 我应该怎么做才能使(3)起作用？
• 为什么 console.log 显示“table”的 trs，而不显示“tbody”的 trs？
• 我应该读什么才能理解这一切而不是质疑它曾经在这里吗？:)

先谢谢大家了!

PS。Ajax 调用(真实):

            function load_tours () {

                    $.ajax({

                        type: 'get',
                        url: 'load_tours',
                        data: $('#search-form').serialize(),
                        success:function (data) {

                            $('#tours_table').empty();

                            tableCreate(data);

                            }           
                        });

        };

        function tableCreate (data) {

            $.each( data, function (i, item) {

            var tr = $('<tr>').append(
                $('<td>').text(item.id),
                $('<td>').text(item.name),
                $('<td>').text(item.lastName);
             $('#tours_table').append(tr);

            });
        };

行计数器:

rowCount = $("#tours_table").find('tr').length;

PPS 这里是(临时)真实页面:

http://81b29c97.ngrok.io/test2 (HTML) http://81b29c97.ngrok.io/js/tours_load_filter.js (JS 1)http://81b29c97.ngrok.io/js/sort_paginate.js (JS 2)

Answer 1

尝试使用 .always() 事件计算 Ajax 调用完成后的行数。

此外，您应该将 success 事件更改为 done 事件，因为第一个事件已被弃用。

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

引用:jQuery API documentation

$.ajax({
    type: 'get',
    url: 'load_tours',
    data: $('#search-form').serialize()
    }).done(function(){
        $('#tours_table').empty();
        tableCreate(data);
    }).always(function(){
        alert($('#tours_table tr').length);
    });        
});