javascript - 如何选择表格元素并运行 JavaScript

Question

我有一个表，想要在行中按钮的单击事件(由数据表填充)上运行js，我使用了数据表网站上的代码，但似乎不起作用。

$(document).ready(function(){
     $('#expvisa').on('click','button',function() {
         var msData = table.row($(this).parents('tr')).data();
         alert( msData[0] +" salary is: "+ msData[4]);
     });
 });

<table id="expvisa" class="table table-bordered" cellspacing="0" >
  <thead>
    <tr>
      <th>EMP Id</th>
      <th>VISA OFFICE</th>
      <th>EMPLOYEE NAME</th>
      <th>QATAR ID</th>
      <th>ID MONTH</th>
      <th>Process </th>                
    </tr>
  </thead>            
</table>

这是创建表的脚本。

        function bringvisa_exp(){	
		
			$.ajax({				
				url:"report_visaexp.php",
				type:"POST",
				data:{comp_n:$('#comp_n').val(),visam_f:$('#visam_f').val()},
				async: false,
				success: function(dataX){	
					obj = JSON.parse(dataX);
					$('#expvisa').DataTable({
					data: obj,
					"columnDefs": 	[ {
					"targets": -1,
					"data": null,
					"defaultContent": "<button>Apply</button>"
									} ]
					} );				
				}								
			}); 
		}

Answer 1

您需要在ajax call success function block 内调用此脚本。因为您的 click 事件 在 DOM 准备好之前就绑定(bind)了。

 $('#expvisa tbody').on('click','button',function() {
     var msData = table.row($(this).parents('tr')).data();
     alert( msData[0] +" salary is: "+ msData[4]);
 });

使用以下内容更新您的 bringvisa_exp() 函数:

function bringvisa_exp(){       
        $.ajax({                
            url:"report_visaexp.php",
            type:"POST",
            data:{comp_n:$('#comp_n').val(),visam_f:$('#visam_f').val()},
            async: false,
            success: function(dataX){   
                obj = JSON.parse(dataX);
                $('#expvisa').DataTable({
                  data: obj,
                  "columnDefs": [ {
                    "targets": -1,
                    "data": null,
                    "defaultContent": "<button>Apply</button>"
                   } ]
                } );
                $('#expvisa').on('click','button',function() {
                  var msData = table.row($(this).parents('tr')).data();
                  alert( msData[0] +" salary is: "+ msData[4]);
                });
            }                               
        }); 
    }