title: knockout.js doesn't work in chrome but works fine firefox
body: <pre><code>    $(function(){
          $("#herb_pinyin").autocomplete({source: "api_herbs.php"});
  
          $.extend(bindings, {
              ingredients: ko.observableArray(),
              newIngredient: {
                  pinyin: ko.observable(""),
                  dosage: ko.observable(""),
                  dosageType: ko.observable("g")
              }
          });
  
          ko.applyBindings(bindings);
  
      });
  
      function addIngredient() {
          if (!bindings.newIngredient.pinyin()) return;
          bindings.ingredients.push({
              pinyin: bindings.newIngredient.pinyin(),
              dosage: bindings.newIngredient.dosage(),
              dosageType: bindings.newIngredient.dosageType(),
          });
          bindings.newIngredient.pinyin("");
          bindings.newIngredient.dosage("");
          bindings.newIngredient.dosageType("g"); 
          $("#herb_pinyin").focus();
      }
          &lt;div data-bind="foreach:ingredients"&gt;
              &lt;div&gt;
              &lt;span data-bind="text:pinyin"&gt;&lt;/span&gt;,
              &lt;span data-bind="text:dosage"&gt;&lt;/span&gt;&lt;span data-bind="text:dosageType"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;div data-bind="foreach:ingredients"&gt;
      &lt;input type="hidden" data-bind="value:pinyin, attr:{name:'pinyin-'+$index()}" /&gt;
      &lt;input type="hidden" data-bind="value:dosage, attr:{name:'dosage-'+$index()}" /&gt;
      &lt;input type="hidden" data-bind="value:dosageType, attr:{name:'dtype-'+$index()}" /&gt;
    &lt;/div&gt;
        &lt;input name="herb_pinyin" type="text" id="herb_pinyin" placeholder="herb name in pinyin" size="30" data-bind="value:newIngredient.pinyin" /&gt;
        &lt;input name="dosage" type="text" id="dosage" placeholder="enter amount" size="13" data-bind="value:newIngredient.dosage" /&gt;
        &lt;select name="dosage_type" id="dosage_type" data-bind="value:newIngredient.dosageType" &gt;
          &lt;option value="g" selected="selected"&gt;g&lt;/option&gt;
          &lt;option value="pcs"&gt;pcs&lt;/option&gt;
        &lt;/select&gt;
        &lt;input type="button" name="button" id="button" value="Add" onclick="addIngredient()" /&gt;
  </code></pre>
  
  <p>add ingredient function button doesn't do anything in chrome and IE; works fine in firefox. any clues as to why it's not working? basically clikcing the add button will later on perform an update to mysql.</p>
  
  <p>in the api_herbs.php i get herb list for autcomplete from database and put in json:</p>
  
  <pre><code>$results = array();
  while ($row = mysql_fetch_object($rsList))
      $results[] = $row-&gt;pinyin;
  
  print json_encode($results);
  </code></pre>
  
  <p>I tried your suggestion of adding bindings.addIngredient = addIngredient; but that didn't have any noticeable effects.</p>