title: Dynamically changing the innerHtml of a Bootstrap button
body: <p>I have the following bootstrap navbar:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="brand"&gt;J+ Iso&amp;epsilon;ditor&lt;/a&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;div class="btn-group"&gt;
                          &lt;button class="btn" id='bts-display-button'&gt;&lt;/button&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                          &lt;ul class="dropdown-menu" id="bts-dropdown"&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;button class="btn"&gt;New BTS&lt;/button&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I dynamically load <code>&lt;li&gt;</code> elements into the <code>dropdown_menu</code>. This works fine. I am also trying to change the innerHtml of <code>bts-display-button</code> to the value of the clicked <code>&lt;li&gt;</code> element.</p>
  
  <p>My CoffeeScript code to achieve this is below:</p>
  
  <pre><code>class Toolbar
    constructor: () -&gt;
  
      @selected_BTS = undefined # The current selected BTS in the BTS dropdown
  
      @create_toolbar()
      @bts_dropdown_selecion_clickhandler()
  
    create_toolbar: () =&gt;
  
    # Add new bts to drop down 
    addBTS: (name) =&gt;
      $('#bts-dropdown').append "&lt;li&gt;#{name}&lt;/li&gt;"
  
  
    # Set the caption of the bts-dropdown button to what is selected
    bts_dropdown_selecion_clickhandler: () =&gt;
      $('body').on 'click', '#bts-dropdown li', -&gt;
        console.log $(this).html()
        Toolbar.selected_BTS = $(this).html()
        $('#bts-display-button').html(Toolbar.selected_BTS)
  </code></pre>
  
  <p>For example if a user clicks on an element <code>&lt;li&gt;Hello&lt;/li&gt;</code> in <code>dropdown_menu</code> then the console correctly logs the value "Hello" but the innerHtml of <code>bts-display-button</code> remains unchanged.</p>
  
  <p>Note: All my scripts are but at the bottom of the html, so that the DOM is ready when the code above is executed. </p>
  
  <p>Please Please could someone help me, as I've been stuck for 2 days on this. Any help is much appreciated. </p>