Question

我尝试通过以下方式获取动态生成的按钮的ID。我试图获取特定的按钮ID，并将其用于<p><button class="accordion">Section 1</button></p> <div class="panel"> <p>Lorem ipsum...</p> </div> <p><button class="accordion">Section 2</button></p> <div class="panel"> <p>Lorem ipsum...</p> </div> <p><button class="accordion">Section 3</button></p> <div class="panel"> <p>Lorem ipsum...</p> </div>。但这并不成功。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

这是我的beforeSend:function(id)

<?php
session_start();
require_once "../auth/dbconnection.php";

$output ='';

$sql= "SELECT * FROM appointment AS a INNER JOIN prescription as p ON a.apt_id=p.apt_id INNER JOIN users as u ON u.user_id=a.user_id AND a.p_id='".$_POST["id"]."'";

$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result)>0){

$output .='
<table class="table table-striped custom-table mb-0">
   <thead>
      <tr>
         <th>Appointment ID</th>
         <th>Prescription ID</th>
         <th>Doctor Name</th>
         <th>Specilization</th>
         <th>Appointment Date </th>                             
         <th>Action</th> 
         <th>Status</th> 
      </tr>
    </thead>';                                 
     while($row=mysqli_fetch_array($result)){
     $output .='
      <tr>
          <td><a href="#">'.$row["apt_id"].'</a></td>
          <td id="pres"><a href="#">'.$row["pres_id"].'</a></td>
          <td>'.$row["username"].'</td>
          <td><span class="custom-badge status-blue">'.$row["specilization"].'</span></td>
          <td>'.$row["apt_date"].'</td>
          <td>                             
          <button id="check'.$row["pres_id"].'" class="btn btn-danger custom-badge status-grey" value="Submit"  data-id='.$row['pres_id'].' onclick="alert(this.id)">   Submit  </button> </td>    
          <td> <span id="status" name="status"></span> </td>                                 
      </tr>';
}                                                 
}else{
    $output .=  '
<tr>
<td colspan="5" align="center"> No more prescriptions available :-( </td>
</tr>';

}
echo $output;   
?>

Answer 1

我会给您的按钮元素一个自定义类，例如delete-btn

class="btn btn-danger custom-badge status-grey delete-btn"

然后修改您的点击事件以监听特定按钮：

$(document).on("click",".delete-btn",function(){ .. }

要获取被单击的按钮的数据属性值，请使用.data()：

var btnDataId = $(this).data('id');

要获取被单击的按钮的id属性值，请使用.attr()：

var btnAttrId = $(this).attr('id');

您可以将$(this)与.text()一起使用来更改显示值：

$(this).text('Checking..');

还值得注意的是，您可以通过将所有重用的jquery对象存储在变量中来提高代码效率，从而使jquery不必一遍又一遍地实例化同一对象。在这种情况下，您的代码多次使用$(this)，因此您应该：var self = $(this);，然后在当前正在使用self的所有实例中使用$(this)变量。

以下是上述所有要点的完整示例：

$(document).on("click",".delete-btn",function(){
   var self = $(this); 
   var id = self.data("id");

    $.ajax({
     url:"delete_record.php",
     method:"POST",
     data:{id:id},
     beforeSend:function(id)
     {
       self.text("Checking......");
  
     },   
     success:function(data){
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      location.reload();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000); 
  });

Answer 2

我看到您已经找到了答案，但是我只想投入两美分以备将来参考。

首先，我希望您正在做一些环境卫生工作，而不仅仅是将客户$_POST放到查询中。这是the first three google results。

第二，您的代码很难阅读。我建议对php中的所有字符串都使用双引号"，并在需要时在字符串中转义\"。只是简化和标准化了一切。这可能也是您最初的问题所在。

'<button id="check'.$row["pres_id"].'" class="btn btn-danger custom-badge status-grey" value="Submit"  data-id='.$row['pres_id'].' onclick="alert(this.id)">   Submit  </button>'

假设$row["pres_id"] = 123，它将呈现为

<button id="check123" class="btn btn-danger custom-badge status-grey" value="Submit" data-id=123 onclick="alert(this.id)"> Submit </button>

请注意，data-id值缺少双引号。使用双引号，只需将数组值放入字符串中即可，只需用{}括起来即可。因此，您的代码将简化为

"<button id=\"check{$row["pres_id"]}\" class=\"btn btn-danger custom-badge status-grey\" value=\"Submit\"  data-id=\"{$row["pres_id"]}\" onclick=\"alert(this.id)\">   Submit  </button>"

我想我的IDE在配色方案上确实更加合理，但是无论哪种方式，我认为它都更具可读性，并有助于防止遗漏逃逸的宪章或将其完全排除在外。另外，使用双引号，您可以将变量放入字符串中，它将仅正确解析它，而无需字符串连接！

说$id = $row["pres_id"]，现在您可以

"<button id=\"check$id\" class=\"btn btn-danger custom-badge status-grey\" value=\"Submit\"  data-id=\"$id\" onclick=\"alert(this.id)\">   Submit  </button>"

Here's a slightly better read on the nuances of php strings.

获取动态生成的按钮的ID

2 个答案: