knockoutjs button click event doesn't fire

Question

I'm building HTML from data which is returned from ajax, it's looking good when I view the source, but for some reason the click event doesn't fire.

This is how I'm creating the markup:

$.ajax({
                    type: "POST",
                    url: "/webservices/WebService.asmx/GetData",
                    contentType: "application/json; charset=utf-8",
                    data: "{'orderId': " + JSON.stringify(order.OrderId) + "}",
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            if (data.d.length > 1) {
                                $.each(data, function () {
                                    $.each(this, function (k, v) {
                                        var temp2 = "<input type='button' class='btn' data-bind='value: " + v.TeacherId + ", click: $root.downloadImage' />";
                                        $(".downloadButtons").append(temp2);
                                    });
                                });
                                $("#selectOrderPackagePopup").modal("show");
                            }
                        }
                    },
                    error: function (n) {
                        alert('Error');
                    }
                });

Then I'm able to see the buttons in the modal popup, and this is the generated source:

The click event is this one:

self.downloadImage = function () {
                if (order) {
                    var url = "DownloadImage.aspx?orderId=" + order.id;
                    window.location = url;
                } 
            };

I'm not able to fire the click event.

Answer 1

You need to call ko.applyBindings after you have added the buttons to the DOM. Place it in your ajax success callback, e.g below the $("#selectOrderPackagePopup").modal("show"); line.