0

次のブートストラップ ナビゲーション バーがあります。

<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ます。これはうまくいきます。また、innerHtml をbts-display-buttonクリックした要素の値に変更しようとしています<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" を正しくログに記録しますが、の innerHtml はbts-display-button変更されません。

注: すべてのスクリプトは html の一番下にあるため、上記のコードが実行されたときに DOM の準備が整います。

これで2日間立ち往生しているので、誰か助けてください。どんな助けでも大歓迎です。

4

1 に答える 1

0

交換：

$（'＃bts-display-button'）。html（Toolbar.selected_BTS）

と

$（'body'）。find（'＃bts-display-button'）。html（Toolbar.selected_BTS）

それを機能させます。

なぜこれが当てはまるのかを説明する新しい質問を開きました：なぜJQuery .findは要素を選択するだけで機能するのですか？

于 2013-02-23T18:11:09.440 に答える