Сохраняйте флажки с помощью функции .clone () в jQuery

Question

Итак, я работаю над проектом с электроном, и мне нужно иметь возможность отображать данные в таблицах, и пользователь будет перемещаться по таблицам, используя ArrowKeys (например).В каждой таблице будет несколько флажков, чтобы пользователь мог сделать выбор, а затем он переходил к следующей таблице.В конце концов, он сможет вернуться к предыдущему столу, где сделанные им выборы будут сохранены.Чекбоксы имеют некоторую функцию onclick, которую я хотел бы иметь возможность сохранять из одной таблицы в другую.

---

Итак, я придумал этот бит кода:

ipcRenderer.on('previousTable', (e) => {
    let $upper = $('#upper').clone(true);
    let $lower = $('#lower').clone(true);
    HTMLBuffer[index] = {
        'upper': $upper,
        'lower': $lower
    };
    $('#upper').empty();
    $('#lower').empty();
    index--;
    let previousTableData = allData.find(i => i == index);
    if (HTMLBuffer[index]) {
        $('#upper').html(HTMLBuffer[index].upper);
        $('#lower').html(HTMLBuffer[index].lower);
    } else {
        makeNewTable(previousTableData);
    }
})

То же самое существует для события «nextTable».

---

Событие click устанавливается для каждого флажка при отображении первой таблицы, оно динамически меняет некоторые цифры / цвета, когда пользователь устанавливает флажок, иотменяет изменения, когда он снимает их.Для этого я просто использую простой цикл for:

checkboxes = tBodyUpper.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
    let checkbox = checkboxes[i];
    checkbox.onclick = function (event) {
        //some color/text changements
    }

(Обратите внимание, что я не использовал здесь jQuery, эта часть кода была там до того, как я попытался использовать jQuery, в конечном итоге она будет измененапозже)

---

Проблема в том, что HTML-код сохраняется и отлично отображается, когда пользователь возвращается, даже отмеченные флажки остаются отмеченными, но функция onclick просто не будет копировать ... Я 'Я очень новичок в jQuery (только сегодня утром для этой конкретной функциональности), поэтому любая помощь будет принята с благодарностью!

Answer 1

Это определенно проблема делегации .Вы запускаете прикрепить обработчики кликов при загрузке страницы.Поэтому, когда флажки «заменяются» табличной функцией prev / next, прикрепленные элементы больше не существуют.

Вы используете jQuery, поэтому попробуйте это так:

$(document).on("click","input:checkbox",function(){
  //some color/text changements
});

Итак, теперь обработчик присоединен к document, который «делегировал» действия над его дочерним элементом, соответствующим селектору (второй аргумент метода .on()).

Вместо того, чтобы присоединять его к document рекомендуется использовать ближайший статический родительский селектор ... Как и контейнер таблицы.Но вы можете использовать document для проверки моего решения.