Question

我想使用所选按钮的ID进行删除。但是我不知道如何从中获取ID。我尝试了this.id，但这没用。

这是我创建按钮的地方：

echo "<a href='{$pdf_link}' target='_blank'><img src=\"https://1234.co.uk/wp-content/uploads/2019/06/pdf.png\" /></a>";

这是var deleteEmployer= document.createElement("td"); var deleteEmployerButton= document.createElement("input"); deleteEmployerButton.setAttribute("type", "submit"); deleteEmployerButton.setAttribute("value", "delete"); deleteEmployerButton.setAttribute("id", employer.employer_id); deleteEmployer.appendChild(deleteEmployerButton); deleteEmployer.addEventListener("click", deleteEmployFunc); row.appendChild(deleteEmployer); document.querySelector("#Employer").appendChild(row);：

deleteEmployFunc

Answer 1

您将事件处理程序添加到deleteEmployer而不是deleteEmployerButton

这是一个应该起作用的最小示例：

var deleteEmployerButton = document.createElement("input");
deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");				
deleteEmployerButton.setAttribute("id", "randomID");

deleteEmployerButton.addEventListener("click", deleteEmployFunc);
    
document.querySelector("#Employer").appendChild(deleteEmployerButton);



//This is the "deleteEmployFunc" :

function deleteEmployFunc() {

  var id = this.id;

  console.log(id);

  fetch("restservices/employer/" + id, {method: 'DELETE'} )
      .then(function (response) {
        if (response.ok) {
          window.location.reload();   
        } else if (response.status == 404) {
           console.log("Employer not found")
        } else {
          console.log("Can't delete employer") 
        }            
      });
}

<div id="Employer"></div>

单击按钮时，应该看到randomID的输出。

Answer 2

this没有引用您的按钮。为了获得id，您可以在deleteEmployFunc上设置属性，同时附加引用该按钮的属性，并且可以在函数本身中使用它。

var employer = { employer_id: 1234 };
var deleteEmployer= document.createElement("td");

var deleteEmployerButton= document.createElement("input");

function deleteEmployFunc() {
console.log(deleteEmployFunc.deleteButton.id);
}

deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.setAttribute("value", "delete");               
deleteEmployerButton.setAttribute("id", employer.employer_id);

deleteEmployFunc.deleteButton = deleteEmployer.appendChild(deleteEmployerButton);

deleteEmployer.addEventListener("click", deleteEmployFunc);

document.querySelector("#Employer").appendChild(deleteEmployer);

<div id="Employer"></div>

Answer 3

正如其他答案所指出的，您addEventListener对错误的对象。代码还有更多问题。看他们。

var employer = {
  employer_id: 111
};

//var deleteEmployer= document.createElement("td"); //table and table row objects have their own DOM functions
var row = document.querySelector('#Employer') //a table
  .insertRow(-1); //add as last row
var deleteEmployer = row.insertCell(-1); //add to the end of Cells collection of the row

var deleteEmployerButton = document.createElement("input"); //OK
// redundant. type is a standard attribute
//deleteEmployerButton.setAttribute("type", "submit");
deleteEmployerButton.type = 'button'; //submit submits the form

deleteEmployerButton.value = "delete";
//no need as you see below
//deleteEmployerButton.setAttribute("id", employer.employer_id);
deleteEmployer.appendChild(deleteEmployerButton); //OK

deleteEmployerButton.addEventListener("click", deleteEmployFunc(employer.employer_id)); // see the trick below
//row.appendChild(deleteEmployer); // already done

//document.querySelector("#Employer").appendChild(row); // table.insertRow(-1) is better

//This is the deleteEmployFunc:

function deleteEmployFunc(id) {
  return function() {

    console.log(id);
    /* commented for test / demo purpose
        fetch("restservices/employer/" + id, {
            method: 'DELETE'
          })
          .then(function(response) {
            if (response.ok) {
              window.location.reload();
            } else if (response.status == 404) {
              console.log("Employer not found")
            } else {
              console.log("Can't delete employer")
            }
          });
          */
  };
}

<table id="Employer"></table>

我想使用所选按钮的ID，但是如何从中获取ID？ this.id不起作用

3 个答案: