javascript - Jquery click 不适用于通过 PHP 动态添加的表 tr

Question

我正在从数据库获取数据并通过 php echo 将其显示在 HTML 上。现在我需要在 id breakrow 的特定 tr 上放置一个点击函数，但是这个点击功能不起作用。我正在使用.on按照文档中建议的功能动态添加内容。另外，我在控制台中也没有看到任何错误。 这是示例代码。 (当我将相同的代码直接添加到 html 页面中时，它按预期工作)

PHP 部分:

echo '<div class="container" id="container">
        <table class="gridtable" id="tableMain">
            <thead>
                <tr class="tableheader">
                  <th>customer</th>
                  <th>product</th>
                  <th>thedate</th>
                  <th>value</th>
                </tr>
            </thead>
            <tbody>
                <tr class="breakrow"><td>customer 01</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 01</td><td>product 04</td><td>04 12 2017</td><td>634.50</td></tr>

                <tr class="breakrow"><td>customer 02</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 01</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 02</td><td>product 02</td><td>30 10 2017</td><td>974.57</td></tr>


                <tr class="breakrow"><td>customer 03</td><td></td><td></td><td></td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 01</td><td>30 10 2017</td><td>974.57</td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 02</td><td>04 12 2017</td><td>634.50</td></tr>
                <tr class="datarow"><td>customer 03</td><td>product 03</td><td>30 10 2017</td><td>974.57</td></tr>

            </tbody>
        </table>
    </div>';

Jquery:

$( document ).ready(function() {

    $('#tableMain').on('click', 'tr.breakrow',function(){
        $(this).nextUntil('tr.breakrow').slideToggle(200);
    });
});

有人可以指导我如何解决这个问题吗？

Answer 1

使用ajax加载内容时，脚本需要绑定(bind)动态添加的内容，因此您可以使用以下脚本对动态加载的数据生效。

$(document).on('click', 'tr.breakrow', function(){
    $(this).nextUntil('tr.breakrow').slideToggle(200);
});