leaflet .bindPopup() not working after page change - ionic-framework

Question

I am working on leaflet map and showing markers on it. on click of marker I am opening the popup and on click of that navigating it to another page, this all works fine but when I click back from the navigated page to map then the .bindPopup() is not working and I am not able to open the popup again.
here is my code:
var marker = leaflet.circleMarker([marker.latitude, marker.longitude], { renderer, radius: 8, weight: 1, color: '#fff', fillColor: markerColor, fillOpacity: 1 })
.addTo(this.map)
.bindPopup(marker.id + '<br/>' + marker.status + '<br/>');
marker.on('click', (e) => {
var popup = e.target.getPopup();
this.issueServiceProvider.getIssue(marker.id, false).subscribe((result) => {
var div = leaflet.DomUtil.create('div', 'command');
div.innerHTML = marker.id + '<br/>' + marker.status + '<br/>' + result.description + '<br/><a id = "command">More Details</a> <br/>';
popup.setContent(div);
leaflet.DomEvent.addListener(div, 'click', () => {
this.navCtrl.push(Constants.Page.IssueDetails, { markerId: marker.id }, Constants.Animation['TransitionForward']);
});
}, (err) => {
console.error('Error' + err);
});
});
How could I make it work?

Answer 1

This popup works, but does not reference your specific function. Try this and then add your function call once the basic setup is complete.
var marker = leaflet.circleMarker([39, -105], { radius: 8, weight: 1, color: "#274FCA", fillOpacity: 1 })
.addTo(map)
.bindPopup(this.id + '<br/>' + this.status + '<br/>');
marker.on('click', (e) => {
var popup = e.target.getPopup();
var div = L.DomUtil.create('div', 'command');
div.innerHTML = 'marker.id' + '<br/>' + 'marker.status' + '<br/>' + 'result.description' + '<br/><a id = "command">More Details</a> <br/>';
popup.setContent(div);
leaflet.DomEvent.addListener(div, 'click', () => {
this.navCtrl.push(Constants.Page.IssueDetails, { markerId: marker.id }, Constants.Animation['TransitionForward']);
});
});