Click on link inside leaflet bindpopup is not working

Question

I'm trying to add a link in my leaflet marker bindpopup and it's not working, The click do nothing, really nothing, no event...:

for (var i = 0; i < this.array.length; i++) {
    let arrayDetails = this.array[i];
    var popupLink='<a (click)="console.log("toto")">See more information</a>';
    var marker = new leaflet.Marker([this.array[i]["lat"],this.array[i]["lng"]], {icon: orangeIcon})
    .addTo(this.map)
    .bindPopup(popupLink);
}

I tried with function as well and it's not working. Do you have any idea? (The link should push to a detail page.)

Why are you using `` syntax instead of `` syntax? Is that an ionic-specific thing? — IvanSanchez, Mar 19 '19 at 15:34
As you imply, the sadness is that Angular introduces its own specific syntax, and people are no longer able to make the distinction. — ghybs, Mar 19 '19 at 15:45
I can't confirm it, but I have a strong suspicion that Angular is not processing that string of HTML, and it's being used *as is*. I suggest you run this outside Ionic with some browser devtools to check the markup of the popup. Unless leaflet-ngx is doing *very* clever things with the `L.InteractiveLayer.bindPopup` method, which I doubt it is. — IvanSanchez, Mar 19 '19 at 15:47

Sébastien Bousquet · Accepted Answer · 2019-03-19T15:33:45.697

0

You have to escape quotes in console.log(), try this way :

for (var i = 0; i < this.array.length; i++) {
    let arrayDetails = this.array[i];
    var popupLink='<a onclick="console.log(\'toto\')">See more information</a>';
    var marker = new leaflet.Marker([this.array[i]["lat"],this.array[i]["lng"]], {icon: orangeIcon})
    .addTo(this.map)
    .bindPopup(popupLink);
}

EDIT : Fix click method name

edited Mar 19 '19 at 15:33

answered Mar 19 '19 at 15:24

Sébastien Bousquet

642
6
15

Thank you very much, yes it works. I guess the "click" syntax is specific ionic thats why if I want to onclick to function for example : onclick="test(arrayDetails)", I get an error : Uncaught ReferenceError: test is not defined... Do you have any idea? – Matthieu Mar 19 '19 at 16:10
I don't understand where is your error ? When you click on the link you have this message `Uncaught ReferenceError: test is not defined ` ? If that's so you have to verified if the `test` function exists in your app – Sébastien Bousquet Mar 19 '19 at 16:39

Click on link inside leaflet bindpopup is not working

1 Answers1