How to show toastr on dynamically inserted buttonID
I was getting error on HTML page on load: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') Error caused by absence of button#deleteDroppedFormItemToastTriggerButton
My button added on click on list item:
// Function to insert buttons HTML into li.dropped-element
function insertDroppedElementButtons(element) {
if (element) {
var buttonsHTML = <div class="dropped-element-buttons"> <button type="button" class="btn btn-icon btn-circle btn-sm btn-secondary shadow draggable-handle"> <i class="las la-bars fs-4"></i> </button> <button type="button" class="btn btn-icon btn-circle btn-sm btn-primary shadow btn-properties"> <i class="las la-tools fs-4"></i> </button> <button type="button" id="deleteDroppedFormItemToastTriggerButton" class="btn btn-icon btn-sm btn-danger btn-circle shadow btn-delete-item"> <i class="las la-trash fs-4"></i> </button> </div>;
element.insertAdjacentHTML('beforeend', buttonsHTML);
}
}
// Function to remove buttons HTML from li.dropped-element
function removeDroppedElementButtons(element) {
if (element) {
var buttonsContainer = element.querySelector('.dropped-element-buttons');
if (buttonsContainer) {
buttonsContainer.remove();
}
}
}
HTML:
This js code did not hepl :(
const formElementRemoved = document.getElementById('deleteDroppedFormItemToastTriggerButton');
// Check if the element exists before proceeding
if (formElementRemoved) {
const formElementRemovedContainer = document.getElementById('formItemDeletedToastContainer');
const formElementRemovedTarget = document.querySelector('[data-kt-docs-toast="stack"]');
formElementRemovedTarget.parentNode.removeChild(formElementRemovedTarget);
// Handle button click
formElementRemoved.addEventListener('click', e => {
e.preventDefault();
// Create new toast element
const newToast = formElementRemovedTarget.cloneNode(true);
formElementRemovedContainer.append(newToast);
// Create new toast instance
// more info: https://getbootstrap.com/docs/5.1/components/toasts/#getorcreateinstance
const toast = bootstrap.Toast.getOrCreateInstance(newToast);
// Toggle toast to show
//more info: https://getbootstrap.com/docs/5.1/components/toasts/#show
toast.show();
});
}
I need some help, please and thank you!
Replies (1)
Hi,
Please try to run your code on the document content ready event when all the JS core plugins are loaded:
// Initialize app on document ready
KTUtil.onDOMContentLoaded(function () {
// your code
});Please try to put the above code after the JS includes inside a script tag.
Regards.
