将类添加到按钮后功能不起作用答案

【问题标题】：function is not working after adding class to a button将类添加到按钮后功能不起作用
【发布时间】：2021-10-05 16:19:24
【问题描述】：

当我使用类按钮调用函数时单击按钮 addClass 和 removeClass 不起作用

我正在获取 php 变量以在表格中显示按钮
基于 php 变量值显示按钮
点击按钮时想要更改该按钮类并调用另一个函数来显示子行

<?php
$stageid = $row["Stage_ID"];
?>
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tr>
<td>BW101.01</td>
<?php
if($stageid == 1)
{
?>
echo'<td><button type="button" class="clarify">Clarify</button></td>';
<?php }
else
{ ?>
echo'<td><button type="button" class="allot">Allot</button></td>';
<?php } ?>
</tr>
</table>

现在正在调用函数并将按钮值发送到后端并更新 ajax 成功我想调用子行表

 $(".clarify").click(function(e) {
        $this = $(this);
        var drawingid = $(this).closest('tr').attr('id'); // table row ID 
        var stage_id = $(this).closest('tr').find('.clarify').val();
        $.ajax({
          type: "POST",
          url: "stage2.php",
          dataType: "json",
          data: {
            "drawingID": drawingid,
            "stage_ID": stage_id
          },
          success: function(data) {
            $this.parent().parent().find('.clarify').html('Allott').addClass('allot').removeClass('clarify');
          }
        });
      });

现在点击第二个按钮调用一个函数，我想显示子行表

 $(function() {
          $('.allot').on('click', function(e) {

            // to avoid to receive the button click inside the td you need:

            var tr = $(this).closest('tr');
            id = $(this).closest('table').attr('id');
            table = $('#' + id).DataTable();
            var row = table.row(tr);
            if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
            } else {
              // Open this row
              row.child(format(row.data(), id)).show();
              tr.addClass('shown');
            }
          });
        });
        $(document).ready(function() {
          $('#example').DataTable();

        });

        function format(d, id) {
          //`d` is the original data object for the row
          //if(sessionStorage['name']!=undefined)
          return '<table id="error"style="width:100%">' +
            '<tr>' +
            '<th>Drawing:</th>' +
            '<th>Designer</th>' +
            '<th>Time</th>' +
            '<th><button type="button">Start</button></th>' +
            '</tr>' +
            '<tr>' +
            '<td></td>' +
            '<td></td>' +
            '<td>00:00</td>' +
            '<td></td>' +
            '</tr>' +
            '</table>';
        }

【问题讨论】：

在第一个代码块中，你忘记在 if 之前放
是的，现在它改变了

标签： php html jquery mysql datatables

【解决方案1】：

我只是在表 tbody 函数中添加点击按钮类名现在它正在工作:)

$(document).ready(function() {
        var table = $('#example').DataTable();

        $('#example tbody').on('click', '.allot', function() {
          var data = table.row($(this).parents('tr')).data();
         // alert(data[0] + "'s salary is: " + data[5]);
          var tr = $(this).closest('tr');
          $this.parent().parent().find('div.progress .progress-bar').css("width", "20%").text(2);
          id = $(this).closest('table').attr('id');
          table = $('#' + id).DataTable();
          var row = table.row(tr);
          if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
          } else {
            // Open this row
            row.child(format(row.data(), id)).show();
            tr.addClass('shown');
          }
        });
      });

【讨论】：