Problem: When using jQuery Tabs in AJAX mode, I load an .html file that has data-bindings on elements and at the bottom of the .html page. I declare my View Models and apply bindings. The bindings apply without errors, however, none of the data-binds are working.
$("#index-tabs").tabs('select', 3);
So the flow is: Existing jQuery Tab Site -> Load ajax tab .html file with knockout bindings and apply bindings at the end -> all element bindings are not applied.
Anyone have an idea why this could be happening? Thanks!
What does your ko.applyBindings call look like? If your new html has a script at the end which creates your view model and calls ko.applyBindings, then it is trying to apply that new view model to the whole page. There is a second parameter to applyBindings for the rootNode. If you don't pass in an element, then it takes window.document.body as the root. Check out this jsFiddle for an example of applying two view models to two different elements.