I've implemented a table list with the use of *ngFor. Each list item includes a hidden details div and a button to show the details. Following the list items, outside of the table div, there is an empty div. Upon clicking the show details button for each table item, the details div is retrieved and added as inner HTML to the empty div, then animated. However, I've encountered an issue where the click event for the button inside the cloned details div is not firing.
<li *ngFor="let item of items">
<div id="item-div">
.......
.......
<button (click)="showDetails($event, item._id)">Show Details</button>
</div>
<!-- Item details (hide) -->
<div id="item-details" class="item-details-info">
.........
.........
.........
<button (click)="saveItem(item._id)">Save Item</button>
</div>
</li>
<!-- Custom popup like div, but its not a popup, its an animated div -->
<div id="custom-animated-div" class="custom-popup">
<div class="popup-data"></div>
<div class="popup-close" (click)="closePopup();">
<i class="material-icons"></i>
</div>
</div>
Below is the component code responsible for cloning and animating:
showDetails (event: any, itemId: string) {
var target = event.target || event.srcElement || event.currentTarget;
this.togglePopup(target, itemId);
}
togglePopup(element: any, itemId: string) {
this.popup = document.querySelector('.custom-popup');
if (this.popup.classList.contains('active')) {
this.closePopup();
setTimeout(this.togglePopup, 600);
}
else {
setTimeout(() => {
document.querySelector('.custom-popup').classList.add('active');
this.cloneInfo(element, itemId);
}, 100);
// this.popup.addClass('active');
}
}
cloneInfo(element: any, jobId: string) {
var parentElement = $(element).parents('.item-row').find('.item-details-info');
var self = this;
setTimeout(() => {
document.querySelector('.custom-popup').children.item(0).innerHTML = parentElement.html();
document.querySelector('.custom-popup').children.item(0).classList.add('fadeInUp');
}, 100);
}
Despite my attempts to add the event inside the clone function using addEventListener, the button event inside the cloned animated div is still not functioning properly.