使用通过JavaScript添加的按钮呈现KO模板数据时遇到问题

如果标题有误导性，我深表歉意。我一整天都在处理这个问题，我想看看是否有人能帮忙。

概述：我们所有的模板都是在DOM中预先加载的。以前，所有表单（模板）都设计为显示在现有页面上。然而，我们最近已经将所有模板移动到jQueryUI对话框中显示。除了一个模板之外，我已经成功地移动了所有必要的代码来实现这一点，我相信这是因为打开带有模板的jQueryUI对话框的按钮是在进行搜索后加载到DOM中的。

"添加"按钮调用ViewModel中的"addUos"函数，以便用户可以继续添加任意数量的表单。

HTML

模板：（使用TWIG作为模板引擎）

<script type="text/html" id="adduos-form">
    {% include "sections/adduos.html" %}
</script>

jQueryUi对话框：

<div id="addUosDialog" title="Add UOS (Units of Service)">
<div id="addUosDialogDiv">
    <div id="adduos_block">
        <form id="adduosForm" action="" method="">
            <div id="addUosDiv">
                <!-- Populated by Ajax via clientTabs.js -->
            </div>
        </form>
    </div>
</div>

JavaScript:

此代码创建模板将在中呈现的div

var currDialogDiv = $("#addUosDiv");
var currDialogForm = $("<div id='addUosForm' data-bind='"" + "template: { name:'adduos-form', foreach: uos_data }'"></div>");
//Create Template
$(currDialogDiv).append(currDialogForm);

此代码位于for循环中，并在基本网格中创建所有用户条目。为每个条目创建一个"添加和编辑"按钮。"编辑"按钮工作正常，但"添加"按钮将根据需要打开对话框，但模板不会显示。在使用Chrome开发工具进行测试后，VM中的addUos功能不会在单击时启动。（这是我的主要问题）

$(currTR).append("<td class='bodyId'>" + currRegNo + "</td>"); //TODO: This will be removed in the future
$(currTR).append("<td>" + currLastName + "</td>");
$(currTR).append("<td>" + currFirstName + "</td>");
$(currTR).append("<td>" + currDob + "</td>");
$(currTR).append("<td>" + currType + "</td>");
$(currTR).append("<td><a href='javascript:;' data-bind='click: $root.addUos' onclick='openAddUosDialog(" + currRegId + ", '"" + currFirstName + "'", '"" + currLastName + "'")' class='button blue small'>Add</a><a href='javascript:;' onclick='openEditUosDialog(" + currRegId + ")' class='button blue small'>Edit</a></td>");

然后我将绑定应用于特定元素

ko.applyBindings(viewModelObj.clientsUosVM, document.getElementById("addUosForm"));

ViewModelObj：（我目前有两个独立的虚拟机）

viewModelObj = {
    clientsVM : new clientsVM(),
    clientsUosVM : new clientsUosVM()
};
ko.applyBindings(viewModelObj.clientsVM);
clientsUosVM = new clientsUosVM();

ViewModel:

function clientsUosVM() {
var self = this;
var uCount = 0; //UOS Forms
self.uos_data = ko.observableArray();
self.addUos = function() {
    self.uos_data.push({
        uosloc : 'uos[' + uCount + '][uosloc]',
        uosloc_id : 'uosloc_' + uCount,
        uossrv : 'uos[' + uCount + '][uossrv]',
        uossrv_id : 'uossrv_' + uCount,
        uosnum : 'uos[' + uCount + '][uosnum]',
        uosnum_id : 'uosnum_' + uCount,
        uosbegin : 'uos[' + uCount + '][uosbegin]',
        uosbegin_id : 'uosbegin_' + uCount,
        uosexp : 'uos[' + uCount + '][uosexp]',
        uosexp_id : 'uosexp_' + uCount
    });
    populateLoc($('select#uosloc_' + uCount));
    $('input#uosbegin_' + uCount).mask('99/99/2099');
    $('input#uosexp_' + uCount).mask('99/99/2099');
    uCount++;
};
self.removeUos = function(item) {
    self.uos_data.remove(item);
};
self.dumpUos = function() {
    self.uos_data([]);
};
}

我包括了所有我认为是一个因素的代码，但如果你需要任何其他信息或代码，请告诉我。提前谢谢！