Question

我有以下bootstrap导航栏：

<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)

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

注意：我的所有脚本都位于html的底部，因此在执行上述代码时DOM已准备就绪。

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

Answer 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?

动态更改Bootstrap按钮的innerHtml

1 个答案: