43

I'm using JQuery DataTables for all my tables because of all the nice built-in features, but it seems the only way to customize the table layout is to set the "sDom" option attribute for the DataTable and use something like $("div.SOMECLASS").html(HTML_HERE) to insert the customized html into the table. (FYI, i'm just trying to customize the header).

The problem is I want the inserted html to use knockoutjs binding. Knockout doesn't seem to initialize the binding this way.

Is there a way to work around this?

This is part of the html that I want to insert. It's pretty much a drop down list of some custom filter functions for the table. 

'<li><a data-bind="click: Filter(\'Severity 1\', 2)">Severity 1</a></li>'
Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
T.Ho
  • 1,190
  • 3
  • 11
  • 16
  • with Jquery you can use .live or .on to handle dynamic created content – James May 31 '12 at 01:52
  • Possible duplicate of [knockout data-bind on dynamically generated elements](https://stackoverflow.com/questions/11066732/knockout-data-bind-on-dynamically-generated-elements) – Liam Jul 28 '17 at 14:28

1 Answers1

68

You have to call this function after insert dynamic HTML element

ko.applyBindings(viewModel, elementContainingDynamicContent)

Example here http://jsfiddle.net/rniemeyer/FCN5p/

SliverNinja - MSFT
  • 31,051
  • 11
  • 110
  • 173
James
  • 13,571
  • 6
  • 61
  • 83
  • 1
    This is the correct answer, I'm not sure why it was so difficult to find. It can't be that uncommon to need to load page content dynamically. Thanks! – Ryan Ore Sep 04 '13 at 00:51
  • 2
    Note to all, for this to work, use `document.getElementById("elementId")` to get a DOM element; don't use jquery `$('#elementId')`, otherwise, ko raises an error: http://tinyurl.com/laaqf7j – raffian Feb 03 '14 at 00:47
  • 6
    If you already have the jQuery element, `$element[0]` also works. – Jeremy J Starcher May 12 '14 at 03:26