Knockout click binding doesnt fire on click

Question

Just setup a basic knokcout view model and respective html view, but the click function doesnt fire.

<script>
    new myModel.XYZ();
</script>

<div id="bar-1">
    <button
            title="Get Document"
            data-toggle="tooltip"
            data-bind="click: getDocument">
        <span class="fas fa-file-alt"></span>
    </button>
</div> 

and my view model is setup as;

myModel.XYZ = function (par) {
    var self = this;

    self.getDocument = function(submission) {
       alert('');
       }
    ko.applyBindings(self, $("#bar-1")[0]);
};

There's no console error or anything else that could help me find out the issue.

Answer 1

I mostly agree with @erpfast, But if you still want to implement your way, you forgot to declare myModel and added method on Object.

var myModel ={};
myModel.XYZ = function (par) {
    var self = this;

    self.getDocument = function(submission) {
       alert('');
       }
    ko.applyBindings(self, $("#bar-1")[0]);
};

new myModel.XYZ();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bar-1">
    <button
            title="Get Document"
            data-toggle="tooltip"
            data-bind="click: getDocument">
            Button
        <span class="fas fa-file-alt"></span>
    </button>
</div>