Mapbox-gl popup.on('open') not firing - mapbox-gl-js

Question

Using Mapbox GL Javascript Web
My popups are opening but the 'open' event isn't firing. I read that this was fixed a while back so is there something I'm doing wrong here:
this.map.on('click', 'listings', (e: any) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const detailURI = e.features[0].properties.detailURI;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(title)
.addTo(this.map)
.on('open', () => {
console.log('Popup opened'); // <--- Not firing
// Add a click listener to the custom button with dynamic URI
document.getElementById('popup-detail-button')
.addEventListener('click', () => {
console.log(`Clicked with link: ${detailURI}`);
});
});
});
If I do it like this:
this.map.on('click', 'listings', (e: any) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const detailURI = e.features[0].properties.detailURI;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(this.returnPopupHTML(image))
.addTo(this.map);
// Add a click listener
document.getElementById('popup-detail-button')
.addEventListener('click', () => {
console.log(`Clicked with link: ${detailURI}`); // <-- Only works if closing popup before opening another one
});
});
The click listener on the button works but if I don't close a popup before opening another one then the event doesn't fire. This is something that users frequently do: they open a popup and then scroll over and open another one without closing the first. So what I'm really trying to do here is ensure whenever a popup is opened and it's custom button is clicked - the event is registered with the correct URI.
Thanks

Answer 1

I'm sure you figured it out by now. I'm just posting this for anyone else that comes across the situation. But I was having the same problem. Initially I was trying to do this.
const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.addTo(this.map);
popup.on('open', e => {
console.log('it is open');
});
What's weird is that when I used 'close' the console.log would work but not with 'open'.
What finally worked was your format, but putting the .on event listener before the .addTo(map):
const layerClicked: mapboxgl.MapboxGeoJSONFeature[] = this.map.queryRenderedFeatures(
e.point,
{
layers: this.currentPointAndMarkerLayerIds,
},
);
const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.on('open', e => {
console.log('It is open');
})
.addTo(this.map);
Thanks for setting me in the right direction!
EDIT
If you wanted to add an event listener I just do this.
const popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
this.generatePointAndMarkerPopupHtml(layerClicked[0]),
)
.on('open', e => {
if (document.getElementById('drive-time')) {
document
.getElementById('drive-time')
.addEventListener('click', e => {
console.log(e);
});
}
})
.addTo(this.map);
I check if the document element exists or else it will create an error for in the developer console for me.