Javascript jQuery在附加DOM对象时丢失.on（）事件

很抱歉下面的代码转储，但这是所有与此问题相关的代码，我去掉了任何多余或敏感的代码。我正在使用.on（'click'，function（）{}）事件侦听器创建一系列按钮，它们似乎在创建事件侦听器和将按钮添加到表中之间的某个时间丢失。我以前遇到过这样的问题，但是DOM对象被分离并重新插入到文档中，对此我已经尝试过修复，但它不起作用。在这里，当从服务器更新时，整个表被清空并重建，因此每次都应该重新创建事件侦听器。我不知道他们在哪里迷路了

function submitCommand(command, jobID) {
    //Open API connection and submit
    var url = "http://IPADDRESS:8082/api/jobs"
    var xhr = new XMLHttpRequest()
    xhr.open("POST", url, true)
    //xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8')
    xhr.onload = function() {
        var jobs = xhr.responseText
        if(xhr.readyState == 4 && xhr.status == "200") {
            console.table(jobs)
        } else {
            console.error(jobs)
        }
    }
    test = JSON.stringify({"Command":command, "JobID":jobID})
    xhr.send(test)
    console.log(command+" "+jobID)
}
function buildControls(jobID) {
    var div     = document.createElement("div")
    var cont    = $(div).clone(true)
    var restart = $(div).clone(true).css({"display": "inline-block", "width": 20, "height": 20, "background-image": "url(img/refresh.png)", "background-size":"contain"})
    restart.attr("id", "restartButton"+jobID)

    $("#restartButton"+jobID).on('click', function() {
        submitCommand("requeue", jobID)
    })
    $(cont).append(restart)
    return cont
}
function jobRow(jobObject) {
    //create and format table elements
    var row = document.createElement("tr")
    var cel = document.createElement("td")

    //Create cells for data
    var controls = $(cel).clone(true).attr("id", "controls"+jobObject._id).append(buildControls(jobObject._id))

    //Insert cells into row, then return row
    var jobRow   = $(row).clone(true).append(controls)
    return jobRow
}
async function buildJobsView() { 
    //create pane elements
    var tbl = document.createElement("table")
    var row = document.createElement("tr")
    var tth = document.createElement("th")

    //build base table
    var headings = ["Job Controls"]
    var header = $(row).clone(true)
    for(h in headings){
        temp = $(tth).clone(true).append(headings[h])
        header.append(temp)
    }
    baseTable = $(tbl).clone(true).append(header)
    $("#jobsTable").append(baseTable)

    //populate jobs
    let jobList = JSON.parse(await getJobs())
    for(job in jobList) {
        $("#jobsPane table").append(jobRow(jobList[job]))
    }
}

---

您正在附加事件处理程序，如下所示：

$("#restartButton"+jobID).on('click', function() {
    submitCommand("requeue", jobID)
})

…这意味着“在文档中搜索此ID并附加单击处理程序”。问题是该元素尚未附加到文档，因此找不到该元素。因此，无法分配任何处理程序

因为您正在该函数中构建元素，所以已经有了对它的引用。直接将处理程序附加到该元素引用，而不是尝试选择您已经拥有的内容

var restart = $(div)
  .clone(true)
  .css({
    display: "inline-block", 
    width: 20, 
    height: 20, 
    "background-image": "url(img/refresh.png)", 
    "background-size":"contain"
  })
  .attr("id", "restartButton"+jobID)
  .on('click', function() {
    submitCommand("requeue", jobID)
  });

---

您正在附加事件处理程序，如下所示：

$("#restartButton"+jobID).on('click', function() {
    submitCommand("requeue", jobID)
})

…这意味着“在文档中搜索此ID并附加单击处理程序”。问题是该元素尚未附加到文档，因此找不到该元素。因此，无法分配任何处理程序

因为您正在该函数中构建元素，所以已经有了对它的引用。直接将处理程序附加到该元素引用，而不是尝试选择您已经拥有的内容

var restart = $(div)
  .clone(true)
  .css({
    display: "inline-block", 
    width: 20, 
    height: 20, 
    "background-image": "url(img/refresh.png)", 
    "background-size":"contain"
  })
  .attr("id", "restartButton"+jobID)
  .on('click', function() {
    submitCommand("requeue", jobID)
  });

---

好吧，这是有道理的。。。让我试试。编辑：好的，这解决了这个问题，但现在服务器没有执行命令，但这可能只是我发送的JSON对象结构的问题。我应该可以自己调试，非常感谢。我需要在明天早上之前完成PoC，这让我不得不考虑最后一个要调试的问题。谢谢，谢谢！！！好吧，这是有道理的。。。让我试试。编辑：好的，这解决了这个问题，但现在服务器没有执行命令，但这可能只是我发送的JSON对象结构的问题。我应该可以自己调试，非常感谢。我需要在明天早上之前完成PoC，这让我不得不考虑最后一个要调试的问题。谢谢，谢谢！！！