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

Posted 2023-05-08

【中文标题】将类添加到按钮后功能不起作用

【英文标题】：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 之前放

是的，现在它改变了

【参考方案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');
          
        );
      );