Your main problem is that you are using jquery to modify the DOM directly and using jquery to register click events.
When knockout modify the DOM for you, the element on which the click event has been binded is now gone and replaced by another one.
Instead you should use the knockout click binding. And for any modifications, instead of modifying the DOM directly you should modify the model and let Knockout modify the DOM for you.
See this jsfiddle where the edit is now made with a knockout click binding. There is still a lot to change in this code but I hope it will send you in the right direction.
self.designer = {
"pageId": ko.observable(0),
"add":
{
"page": function ()
{
var idx = self.form.pages().length;
self.form.pages.push(new PageForm(idx));
self.designer.pageId(idx);
},
},
"edit":
{
"page": function ()
{
$("#dForm-Page").dialog({
autoOpen: false,
height: 300,
width: 380,
modal: true,
buttons: {
"Save": function() {
$("#title").text($("#dlg-pgTitle").val());
$("#description").text($("#dlg-pgDescription").val());
$(this).dialog("close");
},
Close: function() {
$(this).dialog("close");
}
},
close: function() {
$(this).dialog("close");
}
});
$("#dlg-pgTitle").val($("#title").text());
$("#dlg-pgDescription").val($("#description").text());
$("#dForm-Page").dialog("open");
},
},
"remove":
{
"page": function ()
{
var slfDes = self.designer,
pg = slfDes.pageId(),
frmPgs = self.form.pages
if (pg > 0)
slfDes.pageId(pg - 1);
else if (frmPgs().length == 1) {
slfDes.add.page();
slfDes.pageId(pg);
}
frmPgs.remove(frmPgs()[pg]);
for (var i = pg; i < frmPgs().length; i++)
{
frmPgs()[i].id(i);
}
}
},
"page": {
"id": function (data) { self.designer.pageId(data.id()); },
"next": function () { self.designer.pageId(self.designer.pageId() + 1); },
"previous": function () { self.designer.pageId(self.designer.pageId() - 1); },
"nav": function (item)
{
// check for knockout bug
if (item.id() < 999) {
return 'page-icon';
} else {
return 'new-page-icon';
}
}
}
};
And in the html:
<li><a href="#" id="editPage" data-bind="click: $root.designer.edit.page">Edit</a></li>