javascript - 在 Twitter Bootstrap 弹出窗口中引用对象

Question

我正在使用 Twitter Bootstrap 来显示弹出窗口；所以我写了这个:

<div class=navbar-right>
        <ul class="nav navbar-nav">

            <li><a href="#" data-container="ul" data-toggle="popover" data-placement="bottom"
                data-content="<form class='form-search'>
                <div class='input-group'>
                    <input type='text' class='form-control' id='search-text'>
                    <span class='input-group-btn'>
                    <button type='submit' class='btn btn-default' id='search-submit'><i class='glyphicon glyphicon-search'></i></button>
                         </span>
                </div> </form>" id="home-header-search"><span class="glyphicon glyphicon-search"></span> Search </a></li>
            <li><a href="#" ><span class="glyphicon glyphicon-log-in"></span> Login </a></li>
            <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Languages </a></li>

        </ul>
    </div>

它可以工作，但现在我希望 jquery 检测何时单击带有 if#search-sumbit 的按钮。不幸的是，这不起作用:

jQuery ->
$('[data-toggle=popover]').popover({ html : true });
$("#search-submit").click -> 
    console.log("hi")
    return

我怎样才能使该按钮可引用？感谢您的帮助

Answer 1

Bootply:http://www.bootply.com/122534

JS:

$('[data-toggle=popover]').popover({ html : true });
$('[data-toggle=popover]').on('shown.bs.popover', function(){
  $('#search-submit').on('click', function(){
       console.log("hi");
    return false;
  });
});

HTML:

<div class=navbar-right>
        <ul class="nav navbar-nav">

            <li><a href="#" data-container="ul" data-toggle="popover" data-placement="bottom"
                data-content="<form class='form-search'>
                <div class='input-group'>
                    <input type='text' class='form-control' id='search-text'>
                    <span class='input-group-btn'>
                    <button type='submit' class='btn btn-default' id='search-submit'><i class='glyphicon glyphicon-search'></i></button>
                         </span>
                </div> </form>" id="home-header-search"><span class="glyphicon glyphicon-search"></span> Search </a></li>
            <li><a href="#" ><span class="glyphicon glyphicon-log-in"></span> Login </a></li>
            <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Languages </a></li>

        </ul>
    </div>