title: Reinitialze onChange event for Bootstrap multiselect
body: <p>I have a series of multiselect dropdown controls. The first one (users) causes the second one (userGroups) to update when one of its values is changed and the second one (userGroups) causes the third one (theaters) to update the contents of its list.</p>
  
  <p>The onChange event for the first dropdown (users) is working fine.  But, the second one (userGroups) onChange event is not firing when one of it's values is changed and thereby not updating the list of the third dropdown (theaters).</p>
  
  <p>I know from having worked with Javascript, the onChange needs to be reinitiazed; but, I do not know how to do this with the Bootstrap multiselect.  My code follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$('.users').multiselect({
              numberDisplayed: 1,
              maxHeight: 400,
              includeSelectAllOption: false,
              enableCaseInsensitiveFiltering: true,
              filterBehavior: 'both',
              disableIfEmpty: true,
              onChange: function (element, checked) {
                  var userName = $('.users').val();
  
                  if (userName != null) {
                      userName = userName.toString();
                  }
  
                  $.ajax({
                      url: '@Url.Action("LoadUserGroups")',
                      data: { "userName": userName },
                      success: function (data) {
                          $('.userGroups').multiselect('destroy');
                          $('.userGroups').replaceWith($(data));
                          $('.userGroups').multiselect('rebuild');
                      },
                      error: function (xhr) {
                          $('.userGroups').multiselect('destroy');
                          $('.userGroups').multiselect('rebuild');
                      }
                  });
  
              }
          });
  
          $('.userGroups').multiselect({
              numberDisplayed: 1,
              maxHeight: 400,
              includeSelectAllOption: false,
              enableCaseInsensitiveFiltering: true,
              filterBehavior: 'both',
              disableIfEmpty: true,
              onChange: function (element, checked) {
                  javascript: console.log("OnChange event fired");
  
                  var groupId = $('.userGroups').val();
  
                  if (groupId != null) {
                      groupId = groupId.toString();
                  }
  
                  $.ajax({
                      url: '@Url.Action("LoadTheaters")',
                      data: { "groupId": groupId },
                      success: function (data) {
                          $('.theaters').multiselect('destroy');
                          $('.theaters').replaceWith($(data));
                          $('.theaters').multiselect('rebuild');
                      },
                      error: function (xhr) {
                          $('.theaters').multiselect('destroy');
                          $('.theaters').multiselect('rebuild');
                      }
                  });
              }
          });
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>If anyone can show me how to do this or at least point me in the right direction, I would much appreciate it.  Thanks in advance.</p>