title: KnockoutJS not calling update function in custom binding handler
body: <p>I have written a multiselect jQuery plugin that can be applied to a normal HTML select element.</p>
  
  <p>However, this plugin will parse the select element and its options and then remove the select element from the DOM and insert a combination of divs and checkboxes instead.</p>
  
  <p>I have created a custom binding handler in Knockout as follows:</p>
  
  <pre><code>ko.bindingHandlers.dropdownlist = {
  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      // This will be called when the binding is first applied to an element
      // Set up any initial state, event handlers, etc. here
  
      // Retrieve the value accessor
      var value = valueAccessor();
      // Get the true value of the property
      var unwrappedValue = ko.utils.unwrapObservable(value);
  
      // Check if we have specified the value type of the DropDownList items. Defaults to "int"
      var ddlValueType = allBindingsAccessor().dropDownListValueType ? allBindingsAccessor().dropDownListValueType : 'int';
  
      // Check if we have specified the INIMultiSelect options otherwise we will use our defaults.
      var elementOptions = allBindingsAccessor().iniMultiSelectOptions ? allBindingsAccessor().iniMultiSelectOptions :
          {
              multiple: false,
              onItemSelectedChanged: function (control, item) {
                  var val = item.value;
  
                  if (ddlValueType === "int") {
                      value(parseInt(val));
                  }
                  else if (ddlValueType == "float") {
                      value(parseFloat(val));
                  } else {
                      value(val);
                  }
              }
          };
  
      // Retrieve the attr: {} binding
      var attribs = allBindingsAccessor().attr;
  
      // Check if we specified the attr binding
      if (attribs != null &amp;&amp; attribs != undefined) {
  
          // Check if we specified the attr ID binding
          if (attribs.hasOwnProperty('id')) {
              var id = attribs.id;
  
              $(element).attr('id', id);
          }
  
          if (bindingContext.hasOwnProperty('$index')) {
              var idx = bindingContext.$index();
  
              $(element).attr('name', 'ddl' + idx);
          }
      }
  
      if ($(element).attr('id') == undefined || $(element).attr('id') == '') {
          var id = "ko_ddl_id_" + (ko.bindingHandlers['dropdownlist'].currentIndex);
  
          $(element).attr('id', id);
      }
  
      if ($(element).attr('name') == undefined || $(element).attr('name') == '') {
          var name = "ko_ddl_name_" + (ko.bindingHandlers['dropdownlist'].currentIndex);
  
          $(element).attr('name', name);
      }
  
      var options = $('option', element);
  
      $.each(options, function (index) {
          if ($(this).val() == unwrappedValue) {
  
              $(this).attr('selected', 'selected');
          }
      });
  
      if (!$(element).hasClass('INIMultiSelect')) {
          $(element).addClass('INIMultiSelect');
      }
  
      $(element).iniMultiSelect(elementOptions);
  
      ko.bindingHandlers['dropdownlist'].currentIndex++;
  },
  update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var unwrappedValue = ko.utils.unwrapObservable(valueAccessor());
  
      var id = $(element).attr('id').replace(/\[/gm, '\\[').replace(/\]/gm, '\\]');
  
      var iniMultiSelect = $('#' + id);
  
      if (iniMultiSelect != null) {
          iniMultiSelect.SetValue(unwrappedValue, true);
      }
  }};
  ko.bindingHandlers.dropdownlist.currentIndex = 0;
  </code></pre>
  
  <p>This will transform the original HTML select element into my custom multiselect.</p>
  
  <p>However, when the update function is called the first time, after the init, the "element" variable will still be the original select element, and not my wrapper div that holds my custom html together.</p>
  
  <p>And after the page has been completely loaded and I change the value of the observable that I am binding to, the update function is not triggered at all!</p>
  
  <p>Somehow I have a feeling that knockout no longer "knows" what to do because the original DOM element that I'm binding to is gone...</p>
  
  <p>Any ideas what might be the issue here?</p>