Why data-bind doesn't work inside a string?

Question

I am trying to add a button to a tool-tip (Info Windows) in Google Maps. I generate this button inside a string and I just add this string to the content of the tool-tip so it generates the button inside the tool-tip. The problem is that the data-bind doesn't seem to work this way.

Here is an image of the situation: https://i.stack.imgur.com/qwFQ6.jpg

function MapViewModel() {
  var self = this;
  self.removeTurbineColor = ko.observable(false);

  function addToolTip(currentTurbine, turbineIcon){
    var turbineToolTip = "name";

    turbineToolTip += "<button id='remove-emergency-turbine' data-bind='click: 
    removeTurbineColor'> remove </button>";


   self.removeTurbineColor.subscribe( function() {
     console.log("turbine changed");
   });

  var infoWindowTurbine = new google.maps.InfoWindow({content: turbineToolTip});

  if(turbineIcon){
    google.maps.event.addListener(turbineIcon, "click", function(){
      infoWindowTurbine.setPosition(turbineIcon.getPosition());
      infoWindowTurbine.open(self.map, turbineIcon);
     });
   }

 }
}

I expect the output in the console to be "turbine changed" when I click on the button, but nothing appears.

Possible duplicate of [How do I bind new elements using knockout?](https://stackoverflow.com/questions/10051070/how-do-i-bind-new-elements-using-knockout) — crenshaw-dev, Jul 19 '19 at 15:56

score 1 · Accepted Answer · answered Jul 19 '19 at 15:52

Knockout bindings are set up when you first call ko.applyBindings. It won't apply bindings for elements inserted after that initial binding.

Instead of inserting HTML, you could append a button element and manually attach a click event handler.

Or, probably better, you could hard-code the button HTML so its bindings are applied at ko.applyBindings, and toggle its visibility with another observable.

Why data-bind doesn't work inside a string?

1 Answers1