binding new DOM elements to viewmodel after AJAX call - ajax

Question

I'm having troubles binding new DOM elements to my viewmodel. This elements are in a partial view loaded using an AJAX call (see the customizeQuote function below).
$(function () {
var mvcModel = ko.mapping.fromJS(initialData);
function QuoteViewModel() {
var self = this;
self.customizeQuote = function (quote) {
self.selectedQuote = quote;
//remove the disable attribute on all form controls before serializing data
$(".step").each(function () {
$(this).find('input, select').removeAttr('disabled');
});
//convert form data to an object
var formData = $('#etape').toObject();
$.ajax("getSelectedQuote", {
data: ko.toJSON({ model: self.selectedQuote, model1: formData }),
type: "post", contentType: "application/json",
success: function (result) {
$("#custom").html(result);
$("#etape").formwizard("show", "customize");
ko.applyBindings(self.selectedQuote, $("#covers"));
}
});
}
}
var myViewModel = new QuoteViewModel();
var g = ko.mapping.fromJS(myViewModel, mvcModel);
ko.applyBindings(g);
});
Here's the partial view html:
#model QuoteViewModel
<table id="covers">
<thead>
<tr>
<th>
ProductName
</th>
</tr>
</thead>
<tbody data-bind="foreach: CoverQuotesViewModel">
<tr>
<td>
<input data-bind="value: ProductName" />
</td>
</tr>
</tbody>
</table>
the line:
ko.applyBindings(self.selectedQuote, $("#covers"));
triggers an error:
"ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node"
I'm fairly new to knockout and I don't see what I'm doing wrong. Any idea ?

Answer 1

$("#covers") is not a DOM node though, it is an jQuery object. Perhaps try using this instead:
ko.applyBindings(self.selectedQuote, $("#covers")[0]);
The [0] will get the first matched element of the selector in the jquery object.