binding new DOM elements to viewmodel after AJAX call
ajax, asp.net-mvc-4, knockout.js, viewmodel
Solution
`$("#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.
Problem
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 ?