jQuery теряет событие .on () при присоединении объектов DOM

Question

Извините за дамп кода ниже, но это весь соответствующий код для проблемы, и я удалил что-нибудь лишнее или деликатное.Я создаю серию кнопок с использованием прослушивателей событий .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]))
    }
}

Answer 1

Вы прикрепляете обработчик события следующим образом:

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

..., что означает «поиск документа по этому идентификатору и присоединение обработчика щелчка».Проблема в том, что элемент еще не прикреплен к документу, поэтому он не находит элемент.Поэтому никакой обработчик не может быть назначен.

Поскольку вы создаете элемент в этой функции, у вас уже есть ссылка на него.Присоедините обработчик к этой ссылке на элемент напрямую, а не пытайтесь выбрать то, что у вас уже есть.

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)
  });