Code: Select all
summaryContainer.innerHTML = '';
for (const [supplierId, group] of supplierGroups) {
const supplierDiv = document.createElement('div');
supplierDiv.className = 'supplier-summary-table';
let supplierHtml = `
Supplier: ${group.supplier.supplierName}
`;
// Add order confirmation section
supplierHtml += `
Purchase Order
[i][/i] Generate PO
or
`;
supplierDiv.innerHTML = supplierHtml;
summaryContainer.appendChild(supplierDiv);
// Create and attach file input programmatically
const uploadContainer = supplierDiv.querySelector(`#upload-po-container-${supplierId}`);
const uploadButton = document.createElement('button');
uploadButton.className = 'btn btn-outline-secondary';
uploadButton.innerHTML = '[i][/i] Attach PO';
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.pdf';
// fileInput.className = 'form-control';
fileInput.id = `po-upload-${supplierId}`;
fileInput.dataset.supplierId = supplierId;
uploadContainer.appendChild(fileInput);
uploadContainer.appendChild(uploadButton);
fileInput.addEventListener('change', function(e) {
console.log("change event triggered");
}, false);
uploadButton.onclick = (e) => {
e.preventDefault();
fileInput.value = ''; // Reset value to ensure change event
fileInput.click();
};
// Change the style to make it invisible
fileInput.style.opacity = '0';
}
Ich teste dies in Firefox 134.0 unter Ubuntu 22.04.
Bearbeiten
Ich habe vergessen hinzuzufügen, dass die Suche hier Hinweise auf zwei Hauptgründe gibt, die die Ursache dafür sein könnten:
- Änderungsereignis wird nicht ausgelöst weil eine identische Datei ausgewählt wird, wie es der Fall ist hier, oder
- Element wird gelöscht, daher sollte appendChild eingefügt werden, um sicherzustellen, dass das Element dauerhaft ist, wie hier