将 class 添加到按钮后功能不起作用

Question

当我使用 class 按钮调用点击函数时点击按钮添加类和删除类不起作用

正在获取 php 变量以在 table
基于 php 显示按钮的变量值
单击按钮时想要更改该按钮 class 并调用另一个函数来显示子行

<?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 成功时更新我想调用子行 table

 $(".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');
          }
        });
      });

现在我在单击第二个按钮时调用一个函数我想显示子行 table

 $(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>';
        }

Answer 1

我只是在 table tbody 函数中添加了点击按钮 class 名称现在可以正常工作了:)

$(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');
          }
        });
      });

将 class 添加到按钮后功能不起作用

function is not working after adding class to a button

html

php

mysql

jquery

datatables