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加载内容时，脚本需要绑定动态添加的内容，因此您可以使用以下脚本来对动态加载的数据生效。

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

Answer 2

您的点击功能不起作用，因为 jQuery在客户端运行，并且 php在服务器端运行，因此在执行脚本时将找不到特定的ID，因为该表是通过php呈现的。

这是通过事件委托完成的。事件将绑定到包装类元素，但将委派给选择器类元素。就是这样。

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

注意： wrapper-class元素可以是任何ex。文件，正文或包装纸。包装器应该已经存在。

Answer 3

您无需在click事件上传递第二个参数。工作代码如下。这里我只是在单击时发出警报，您必须将自定义代码替换为警报。

$( document ).ready(function() {
    $('#tableMain tr.breakrow').on('click',function(){
       alert('toggle');
     });
});

单击Here，以获取jsfiddle中的工作示例。

Answer 4

在添加动态内容或在加载窗口或添加任何ajax数据后添加其他元素时，在这种情况下，静态单击$(element).click(function(){})不起作用，必须将目标元素与文档绑定，此处示例：

$(document).on('click', 'your target element', function(){
    //your code here......
});

_------_

谢谢

_------_

jQuery单击不适用于通过PHP动态添加的表tr

4 个答案: