Делегирование событий - привязка данных к событию щелчка из отдельной функции выборки - PullRequest
Новая
       5

Делегирование событий - привязка данных к событию щелчка из отдельной функции выборки

0 голосов
/ 08 мая 2020

У меня есть JavaScript, который извлекает данные из PHP скрипта. PHP печатает выбранные данные в PDF-файлы и возвращает расположение папки, которая была создана для хранения PDF-файлов, и список номеров счетов (сгенерированных в PHP). 

function printToPdf(p) {
let url = 'php/pdf.php?PO=' + p;
fetch(url, {
    method: 'post',
}).then(response => {
    return response.json()
})
// .then(data => {
//     console.log(data[0].folder);
//     const waveButton = document.getElementById('waveButton');
//     waveButton.addEventListener("click", (e) => {
//         e.preventDefault();
//         data.forEach(postInvoicesToWave);
//     });
// })
     .catch(err => {
       console.log(err);
     })
};

Выше код работает нормально (без комментариев), однако я решил использовать делегирование событий для обработки событий щелчка для нескольких кнопок в div: 

let menu = document.querySelector('#buttonRow');
menu.addEventListener('click', (event) => {       
   let target = event.target;
   let invoiceDate = document.querySelector('input[type="date"]').value;
   let splitDate = invoiceDate.split('-');
   let dateNew = new Date(splitDate[0], splitDate[1] - 1, splitDate[2]);
   let monthName = dateNew.toLocaleString('default', { month: 'long' });
   let poArray = Array.from(document.querySelectorAll("input[type=checkbox][name=check]:checked")).map(e => e.value);
switch(target.id) {
    case 'selectDate':
        event.stopPropagation();  //this doesn't work
    case 'dateButton':
        setDateandInvoiceNumbers(poArray, invoiceDate, monthName);
        break;
    case 'pdfButton':
        printToPdf(poArray);
        break;
    case 'waveButton':
        data.forEach(postInvoicesToWave);
        break;
    case 'selectAllCheckBox':            
        selectAll(); 
        console.log(target.id);  //console logs selectAllCheckBox
        break;
}
});

Я ищу решение для 'ассоциировать / привязать' ( извините, пожалуйста, мое незнание синтаксиса) данные, полученные из функции printToPdf, в оператор switch case 'waveButton':

Мне также интересно, почему в операторе switch я не могу добавлять классы или устанавливать атрибуты для цели. id 

if (!target.id.hasAttribute('checked')){
   target.id.setAttribute('checked', 'checked');                  
}
else{
  target.id.removeAttribute('checked');  
} 
//dev console: Uncaught TypeError: target.id.hasAttribute is not a function

Это заставляет меня задуматься, не слишком ли я усложняю вещи, должен ли я использовать прослушиватель событий для каждого элемента?

Много, чтобы переварить там - извините! Любая помощь или предложения будут очень признательны!

...