javascript - 将新的 添加到表后，搜索/排序功能已损坏

Question

我正在使用引导管理预设主题，但其表格功能遇到问题。以前，表格会在右上角显示搜索功能，并允许您按行对表格进行排序。我为表中的每个条目添加了一个新的表行，它破坏了此功能。它与第二行的“隐藏”或“显示”无关，而只是为每个条目添加第二行。我进行了简短的浏览，认为这与搜索尝试运行的表的每一行中的元素数量有关，并且存在不匹配。即使在表中添加第二行后，我仍然可以实现搜索/排序吗？代码如下:

 <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Session Name</th>
                                <th>Provider</th>
                                <th>Status</th>
                                <th>Pricing Type</th>
                                <th>Subscription Type</th>
                                <th>JIRA Number</th>
                                <th>Accept Port</th>
                                <th>IP Addresses</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Session Name</th>
                                <th>Provider</th>
                                <th>Status</th>
                                <th>Pricing Type</th>
                                <th>Subscription Type</th>
                                <th>JIRA Number</th>
                                <th>Accept Port</th>
                                <th>IP Addresses</th>
                            </tr>
                        </tfoot>
                    <tbody>
                        {% for item in session_details %}
                        <tr onclick = "rowClick(this)">
                            <td>{{ item.session_name }}</td>
                            <td>{{ item.client_name }}</td>
                            <td>{{ item.current_status }}</td>
                            <td>{{ item.pricing_type }}</td>
                            <td>{{ item.subscription_type }}</td>
                            <td>{{ item.jira }}</td>
                            <td>{{ item.accept }}</td>
                            <td>
                                {% for ips in item.IP_Addresses %}
                                    <li>{{ ips.ip_addr }}</li>
                                {% endfor %}
                            </td>
                        </tr>
                        <tr bgcolor="#f8f9fa">
                            <td colspan="8">
                                {% for notes in item.Notes %}
                                <p><b>Note: </b>"{{ notes.note }}"</p><p><small><strong> Time of entry: </strong><i>{{notes.time_now}}</i></small></p>
                                {% endfor %}
                                </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    </table>

                   <script>
                    function rowClick(x)
                    {
                        var content = $(x).text().split('\n')[1];
                        console.log(content);

                    }
                    </script>

                    <script>
                    $( document ).ready(function()
                        {
                            console.log("ready!");
                            $("td[colspan=8]").find("p").hide();
                            $("table").click(function(event) {
                                event.stopPropagation();
                                var $target = $(event.target);
                                if ( $target.closest("td").attr("colspan") > 1 )
                                {
                                    $target.slideUp();
                                } else
                                {
                                    $target.closest("tr").next().find("p").slideToggle();
                                }
                            });
                        });
                    </script>
                </div>

开发者控制台中生成的错误消息:

未捕获类型错误:无法设置未定义的属性“_DT_CellIndex”

Answer 1

$.click() 是一个不能与新元素一起使用的函数。当文档准备好时它被初始化。

要将函数 click 与动态元素一起使用，请使用函数 $.on('click', () => {}) http://api.jquery.com/on/