动态更改 Bootstrap 按钮的 innerHtml答案

【问题标题】：Dynamically changing the innerHtml of a Bootstrap button动态更改 Bootstrap 按钮的 innerHtml
【发布时间】：2013-02-23 16:55:07
【问题描述】：

我有以下引导导航栏：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand">J+ Iso&epsilon;ditor</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <div class="btn-group">
                        <button class="btn" id='bts-display-button'></button>
                        <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
                        <ul class="dropdown-menu" id="bts-dropdown">

                        </ul>
                    </div>
                <button class="btn">New BTS</button>

                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

我将<li> 元素动态加载到dropdown_menu 中。这工作正常。我也在尝试将bts-display-button 的innerHtml 更改为点击的<li> 元素的值。

我的 CoffeeScript 代码如下：

class Toolbar
  constructor: () ->

    @selected_BTS = undefined # The current selected BTS in the BTS dropdown

    @create_toolbar()
    @bts_dropdown_selecion_clickhandler()

  create_toolbar: () =>

  # Add new bts to drop down 
  addBTS: (name) =>
    $('#bts-dropdown').append "<li>#{name}</li>"


  # Set the caption of the bts-dropdown button to what is selected
  bts_dropdown_selecion_clickhandler: () =>
    $('body').on 'click', '#bts-dropdown li', ->
      console.log $(this).html()
      Toolbar.selected_BTS = $(this).html()
      $('#bts-display-button').html(Toolbar.selected_BTS)

例如，如果用户点击dropdown_menu 中的元素<li>Hello</li>，那么控制台会正确记录值“Hello”，但bts-display-button 的innerHtml 保持不变。

注意：我所有的脚本都在 html 的底部，所以当上面的代码执行时 DOM 就准备好了。

请有人可以帮助我，因为我已经被困了 2 天。任何帮助深表感谢。

【问题讨论】：

id 设置为bts-display-button 的元素有多少？
只是代码中显示的那个

标签： jquery twitter-bootstrap coffeescript innerhtml

【解决方案1】：

替换：

$('#bts-display-button').html(Toolbar.selected_BTS)

与

$('body').find('#bts-display-button').html(Toolbar.selected_BTS)

让它工作。

我打开了一个新问题，讨论为什么会出现这种情况：Why does JQuery .find work over just selecting the element?

【讨论】：