Dynamically add new div after page load

Question

On my view I have an option to add users, each user is a div with a few fields:

<div>
    <input data-bind="value: name" />
    <input data-bind="value: position" />
    <input data-bind="value: email" /></div>
    <button data-bind="click: function(){ $root.addUser()}">SAVE</button>
</div>

This div is being added by a button click, and didn't exist when the page loaded.

When I try to save the new user by clicking on the SAVE button, it doesn't work, nothing happens, it just ignores my click.

So my question is- how can I make knockout data-bind work on dynamically generated element?

I read a few posts online but couldn't find a solution, any help would be appreciated.

Users.js script:

var User = function (data) {
    this.name= ko.observable(data.name);
    this.position= ko.observable(data.position);
    this.email= ko.observable(data.email);
}
self.users = ko.observableArray([]);
self.addUser= function () {
  console.log("test");   
}

And this is the code that adds the div: Users.ui.js:

$('body').on('click', '.add', function () {
        var strClientSecHtml = "<div class=\"sec\"><div class=\"secIn\">\n...
        $(strClientSecHtml).insertBefore($(this).closest('.sec'));
        showPrimaryLbl();
})

Answer 1

You can apply a new set of bindings to dynamic content if you create it such that you have an element reference.

$('body').on('click', '.add', function () {
        var strClientSecElem = $('<div class=\"sec\"><div class=\"secIn\">\n...');
        $(this).closest('.sec').before(strClientSecElem);
        ko.applyBindings(new User({}), strClientSecElem.get(0)); //get the native element from jQelement
        showPrimaryLbl();
})

That being said, with knockout you would normally want to modify your javascript objects, and leave DOM modifications up to the library instead of dynamically inserting html. You could push a new User object to the users array, and a foreach:users binding would take care of creating the new elements in the DOM.

Answer 2

As Jason so eloquently mentioned, you wouldn't/shouldn't normally do this with knockout. Below is an optimized "knockout-y" version of your code. The jQuery code has been converted to a custom binding which will run each time the element has been added.

HTML:

<!-- ko template: { name: 'user-tmpl', foreach: users } -->
<!- /ko -->

<script type="text/html" id="user-tmpl">
    <div data-bind="userDivOnLoad">
        <input data-bind="value: name" />
        <input data-bind="value: position" />
        <input data-bind="value: email" /></div>
        <button data-bind="click: $parent.addUser()">SAVE</button>
    </div>
</script>

JavaScript Models:

var User = function (data) {
    var self = this;

    self.name = ko.observable();
    self.position = ko.observable();
    self.email = ko.observable();

    if(data)
    {
        self.name(data.name);
        self.position(data.position);
        self.email(data.email);
    }    
}

var AppModel = function(){
    var self = this;

    self.users = ko.observableArray([]);

    self.addUser= function () {
      console.log("DSA");

      self.users.push(new User());
    }

    //hydrate
    (function(){
        self.users.push(new User());
    }();
};

Custom Binding:

ko.bindingHandlers.userDivOnLoad = {
    init: function(element) {
        showPrimaryLbl();
    }
};

My recommendation is to remove the DOM manipulation from the binding handler and determine a logical construct in which you can apply it within knockout models.