Jquery click 不适用于通过 PHP 动态添加的表 tr [重复]答案

【问题标题】：Jquery click is not working on dynamically added table tr via PHP [duplicate]Jquery click 不适用于通过 PHP 动态添加的表 tr [重复]
【发布时间】：2019-06-10 12:22:59
【问题描述】：

我正在从我的数据库中获取数据并通过 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);
    });
});

谁能指导我如何解决这个问题？

【问题讨论】：

建议： 不要使用 echo 输出大块的 HTML。使用?> 结束PHP 块，编写您的HTML，然后如果需要，使用<?php 再次启动PHP 块。这样一来，您就不需要关心转义引号，并且您的 IDE 将能够正确突出 HTML 的语法，使其方式更易于调试。

标签： javascript php jquery html-table

【解决方案1】：

使用 ajax 加载内容时，脚本需要绑定动态添加的内容，以便您可以使用下面的脚本，该脚本可以对动态加载的数据生效。

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

【讨论】：

：谢谢，它的工作原理
@acr 不客气 :)

【解决方案2】：

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

这是由事件委托完成的。事件将绑定到 wrapper-class 元素，但将委托给 selector-class 元素。这就是它的工作原理。

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

注意： wrapper-class 元素可以是任何东西。文档、正文或您的包装。 Wrapper 应该已经存在。

【讨论】：

【解决方案3】：

您不需要在单击事件上传递第二个参数。工作代码如下所示。这里我只是在单击时发出警报，您必须将自定义代码放在警报位置。

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

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

【讨论】：

【解决方案4】：

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

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

_ - - - - - - _

谢谢

_ - - - - - - _

【讨论】：