Bindings are not working after jquery .html() append

Question

I have this simple div:

<div id="mainContent">

</div>

and it's empty. Now I'm trying to append this HTML to the above div:

<div id="mainContent">
   <label>Project Name</label>
   <input type="text" id="projectName" data-bind="value: projectName"/> 
   <label>Tracker Name</label>
   <input type="text" id="trackerName" data-bind="value: trackerName"/>
</div>
<button type="submit" data-bind="click: submitNewProject">Submit</button>

By using:

                       $.ajax({
                             type : 'POST',
                             url : 'newTracker.php',
                             dataType : 'html',
                             success : function(data){
                                     $("#mainContent").html(data);
                             },
                             error : function(XMLHttpRequest, textStatus, errorThrown) {
                                     alert('Something is wrong!');
                             }
                     });

Where data is the HTML I'm trying to assign by: $("#mainContent").html(data);

At first look everything looks pretty, but there is a problem - the bindings are not working.

What I mean is that in the newly assigned HTML I have a button supposed to call a viewmodel function, but it does not...

BUT if I place the code directly inside of the div the bindings are working like a charm.

Why my bidings are not working when I'm assigning a new HTML code inside of the div? I know that I'm missing something really small and basic here, but I can't spot it.

EDIT:

Button event:

 submitNewProject = function(){
                            console.log("submit new project");
                        };

Possible dupe? http://stackoverflow.com/questions/11066732/knockout-data-bind-on-dynamically-generated-elements. Dynamically added content will not be in the VM so you have to (re)apply your bindings. — Stevangelista, Jun 10 '14 at 13:15
can you show us the eventhandler of the button? i gues you are not using delegates using the `on()` — Mivaweb, Jun 10 '14 at 13:15

score 5 · Accepted Answer · answered Jun 10 '14 at 13:31

Knockout cannot track newly created elements, if your DOM changed using Ajax methods you'll have to explicitly bind a view-model to the newly created elements.

Something like:

$.ajax({
    type: 'POST',
    url: 'newTracker.php',
    dataType: 'html',
    success: function (data) {
        var $mainContent = $("#mainContent");
        $mainContent.html(data);

        var existingViewModel = ko.dataFor(document.body);
        ko.applyBindings(existingViewModel, $mainContent.get(0));
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert('Something is wrong!');
    }
});

Silvertiger · Answer 2 · 2014-06-22T07:29:19.490

Sometimes you need to create a secondary function on the parent page to apply the bindings and then call that function from within the appended text. All the functions defined on the original page as it loads will be available. I have used this method before, though you have to know in advance what functions you will need to build. Or you can just include the binding as part of the post-ajax process.

It makes ajax loads with decent functionality

function bindStuff() {
    $(".class1").click(function() {
        // do something with the bind        
    });
}
function ajaxLoad() {
    // Perform ajax load
    // on complete call your bindings
    complete: function() {
        bindStuff();
    }
}

With your example:

                  $.ajax({
                         type : 'POST',
                         url : 'newTracker.php',
                         dataType : 'html',
                         success : function(data){
                                 $("#mainContent").html(data);
                         },
                         complete: function(){
                                 bindStuff();
                         },
                         error : function(XMLHttpRequest, textStatus, errorThrown) {
                                 alert('Something is wrong!');
                         }
                 });

i place it in the complete because some javascript ajax loads aren't instant, success can return funky things and still allow data to be loading while complete (from what i understand) is truly complete. — Silvertiger, Jun 10 '14 at 13:37
interesting... I'll check that out. +1 for the concept at least — Flak DiNenno, Jun 10 '14 at 13:38

score 2 · Answer 3 · answered Jun 10 '14 at 13:34

As most have pointed out. When you add the HTML dynamically with the append, the DOM isn't reevaluating the bindings. So, you need to either:

apply/reapply your bindings in the .ajax success event handler
apply/reapply your bindings in a document html onChange handler
place your HTML statically in the first place but use a class for all the elements that has a style of set the display:none, then change the style to display:block, display:inline-block, etc..
use a hybrid of above with some static HTML to at least establish the binding between the button and function and anything else that will be required to make the bindings work, but then dynamically .append() anything else that is not dependent on the binding

Bindings are not working after jquery .html() append

3 Answers3

Linked