title: how to data-bind knockout js viewmodel to jquery dynamically created rows
body: <p>Within my page which is bound to the viewmodel I have a section where the user can add elements to the page The elements are a filter section comprised of a few value fields and a select element that needs to be databound to the viewmodel.</p>
  
  <p>Running the select option inline in the html it works fine. However once I pull it out and add it to the jquery that adds the filter control it fails to bind. I realize this is due in part to the view model already being bound and I have tried to call apply bindings again but this fails as well. </p>
  
  <p>I can't use the foreach as I have in other areas because this section is optional. Users do not have to add filters if they don't want to which is why I went the jquery route.</p>
  
  <p>Can anyone provide some suggestions on how to re-bind the select element to the view model once the page has already rendered or is there a better approach using just Knockout to accomplish this? </p>
  
  <p>code:
  html</p>
  
  <pre><code>  &lt;div id="filterSection" data-bind="with: ReportObject"&gt;
                  &lt;select data-bind="options: SelectedAttributes(), optionsText: function(SelectedAttributes){ return SelectedAttributes.NameHierarchy() + '.' + SelectedAttributes.LabelName() },  optionsCaption:'Select a Field...'"&gt;
                  &lt;/select&gt;&lt;!-- the select here works I added this for testing --&gt;
                  &lt;div id="filterBuilder"&gt;
                      &lt;input type="button" value="Add A Filter" title="Add A Filter" class="special" id="add" /&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>function CreateFilterRow() {
          $("&lt;div class='filterrow'&gt;&lt;select class='queryterm' name='condition'&gt;&lt;option  value='AND'&gt;AND&lt;/option&gt;&lt;option value='OR'&gt;OR&lt;/option&gt;&lt;/select&gt;" +
      "&lt;select data-bind='options: SelectedAttributes(), optionsCaption:'Select a Field...'&gt;&lt;/select&gt;&amp;nbsp;&amp;nbsp;&lt;select name='operator'class='operClass'&gt;&lt;option value='EQUALS' id='opt1'&gt;Equals&lt;/option&gt;&lt;option id='opt1' value='CONTAINS'&gt;Contains&lt;/option&gt;&lt;option id='opt2' value='DOES NOT CONTAIN'&gt;Does Not Contain&lt;/option&gt;&lt;option id='opt3' value='LIKE'&gt;Like&lt;/option&gt;&lt;option id='opt4' value='BETWEEN'&gt;Between&lt;/option&gt;&lt;/select&gt;&amp;nbsp;&amp;nbsp;&lt;input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' /&gt;&amp;nbsp;&amp;nbsp;&lt;a id='btnRemove' class='ui-button-text-only'&gt;Remove&lt;/a&gt;&lt;a id='btnadd' class='ui-button-text-only'&gt;Add&lt;/a&gt;&lt;/div&gt;").appendTo('#filterBuilder');
      };
  
      //orignal add row button
      $(document.body).on('click', '#add', function (event) {
          CreateFilterRow();
          ko.applyBindings(ReportWriterViewModel);
      });
  </code></pre>
  
  <p>The jquery block here is just the insertion of fields into the DOM and the event click. The apply bindings is invoked further up the line. I omitted the KO code as that works everywhere else so I know the issue is not in the Vm but in injecting these elements post VM initalization.</p>
  
  <p>I have also tried to use the applyBindings and using the dom element name with no luck </p>
  
  <pre><code> ko.applyBindings(ReportWriterViewModel , document.getElementById('filterSection'));
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p>-cheers</p>