我有以下引导导航栏:
<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ε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”,但 innerHtmlbts-display-button
保持不变。
注意:我所有的脚本都在 html 的底部,所以当上面的代码执行时 DOM 就准备好了。
请有人可以帮助我,因为我已经被困了两天。任何帮助深表感谢。