Having trouble rendering KO template data with button added via JavaScript

Question

My apologies in advance if the title is misleading at all. I have been dealing with this issue all day and I wanted to see if anyone could help.

Overview: All our templates are loaded up front in the DOM. Previously all the forms (templates) were designed to display on the existing page. However, we have recently moved all the templates to display in jQueryUI Dialogs. I have successfully moved all the necessary code to make this work with the exception of one template and I believe it is because the button that opens up the jQueryUI Dialog with the template is loaded in the DOM after a search in conducted.

The 'Add' button calls the 'addUos' function inside the ViewModel so that the user can continue to add as many forms as they desire.

HTML

Template: (Using TWIG as template engine)

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

jQueryUi Dialog:

<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:

This code creates the div that the template will render in

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

//Create Template
$(currDialogDiv).append(currDialogForm);

This code is in a for loop and creates all user entries in a basic grid. An Add and Edit button is created for each entry. The Edit button works just fine but the Add button will open up the Dialog as desired but the template will not be displayed. After testing with Chrome Dev Tools, the addUos function in the VM is not being fired on click. (That is my main issue)

$(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>");

Then I apply the binding to the specific element

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

ViewModelObj: (I currently have 2 separate VMs)

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([]);
};
}

I included all the code that I would consider a factor but if you need any other info or code just let me know. Thank you in advance!

Answer 1

Thanks to whoever took the time to read my long question but I identified my problem yesterday before I left work.

I just removed the data-bind click event data-bind='click: $root.addUos and moved it to the onclick function 'openAddUosDialog()'

Hope this helps anyone else having the a similar issue.

//Open Add UOS Dialog
function openAddUosDialog(regid, fname, lname) {

viewModelObj.clientsUosVM.dumpUos();
viewModelObj.clientsUosVM.addUos();
$("#adduos_block").show(200);

//Open Dialog
$("#addUosDialog").dialog("open");

$("#auos_regid").val(regid);
$("#auos_fname").val(fname);
$("#auos_lname").val(lname);
}