JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div class="col-md-6">
<div id="addButt" data-bind="html: addButton"></div>
</div>
JavaScript
function AppViewModel() {
var self = this;
self.addButton = ko.observable("");
self.buttonClicked = function() {
alert('Button clicked');
};
}
$( document ).ready(function() {
// Initiall, there is no button.
var avm = new AppViewModel();
ko.applyBindings(avm, $("#addButt")[0]);
// Now, create the button and clean and reapply KO to the button itself.
avm.addButton("<button class='btn btn-primary btn-lg' type='button' data-bind=\"click: buttonClicked\"> Add button</button>");
ko.cleanNode($("#addButt button")[0]);
ko.applyBindings(avm, $("#addButt button")[0]);
});