javascript - 如何在 Table 内的按钮元素上定义新的 ajax 函数

Question

我正在使用ajax函数中的循环填充表格，该函数接受参数“php文件返回Json编码数据”；在数据旁边的每个表行中；我有一个包含 3 个按钮的单元格，用于删除、编辑和保存特定于行数据的操作。

问题是当我尝试为按钮添加 ajax 功能时它不起作用!

这是我的ajax函数

                $.ajax({    
                          type: "GET", 
                          url: "php/db_selectPatients.php", 
                          data : "",
                          dataType: "json",
                          success: function(resp){
                               if (resp.success == 1 ){
                                  //alert("Update successful");
                                  var tab = eval(resp);
                                  var k, i = 0 ;
                                  var page_patients = "";
                                  //$("#patientsList").html("");
                                  for (k in tab.Patients ){

                                      //$.each( tab.Patients[i].patient_firstN,function( key, value ) {
                                          //alert( key + ": " + value );
                                           page_patients += 
   '<tbody id="patientsTable">'+
       '<tr>'+
            '<td class="center" id="chekBx">'+
                '<label class="position-relative">'+
                    '<input type="checkbox" class="ace" />'+
                    '<span class="lbl"></span>'+
                '</label>'+
            '</td>'+

            '<td id="mail">'+
                '<a href="#">'+tab.Patients[k].patient_email+'</a>'+
            '</td>'+
            '<td id="name">'+tab.Patients[k].patient_lastN+" "+tab.Patients[k].patient_firstN+'</td>'+
            '<td class="hidden-480" id="gender">'+tab.Patients[k].patient_gender+'</td>'+
            '<td id="phone">'+tab.Patients[k].patient_phone+'</td>'+

            '<td class="hidden-480" id="edress">'+
                '<span class="label label-sm label-warning">'+tab.Patients[k].patient_adress+'</span>'+
            '</td>'+

            '<td  id="actions">'+
                '<div class="hidden-sm hidden-xs btn-group">'+
                    '<button class="btn btn-xs btn-success" id="save">'+
                        '<i class="ace-icon fa fa-check bigger-120"></i>'+
                    '</button>'+

                    '<button class="btn btn-xs btn-info" id ="edit">'+
                        '<i class="ace-icon fa fa-pencil bigger-120"></i>'+
                    '</button>'+

                    '<button class="btn btn-xs btn-danger" id="delete">'+
                       '<i class="ace-icon fa fa-trash-o bigger-120"></i>'+
                    '</button>'+
                '</div>'+               
            '</td>'+
        '</tr>'+
    '</tbody>';
                                        //});
                                        //i++;
                                        $("button#save").click(function() {
                                                alert("Save clicked");
                                        }); 
                                    }

                                    $("table#sample-table-1").append(page_patients);

                              }else{
                                  alert("there is No Patient Susbcribed to You Doctor .. But you can Always Add Some !!");
                                  return true ;
                              } 
                          },
                          error: function(resp){
                            //alert("Unexpected error, Please try again");
                            window.location.assign("error-404.html");//to redirect to an error page :D
                          }
                });

Answer 1

因为您要在加载后添加到 DOM，所以必须使用 jQuery .on() 函数，如下所示:

$('body').on('click', '#save', function(){
    alert('hello world');
});

另请注意，如果您要添加多个版本，则只能有一个具有特定 ID 的 DOM 元素。如果有多个，请附加一个数字来分隔它们，然后使用类似于以下的选择器:

$('body').on('click', 'button[id^="save"]', function(){
    var buttonID = $(this).attr('id').replace('save', '');
    alert('hello from button ' + buttonID);
});

您可以在此处阅读有关 .on() 命令的更多信息 Jquery .on()您可以在此处阅读有关选择器的更多信息 Jquery Selectors

编辑:

我只是要更新我的回复:我同意 CJ 的观点，你应该用一个类来标识它们，并用 data-id 属性来区分，如下所示:

<button name="save" class="saveBtn" data-id="ROWIDGOESHERE" />

然后是你的 .on 函数:

$('body').on('click', '.saveBtn', function(){
    var rowID = $(this).data('id');
    alert('hello from row ' + rowID;
});