Bootstrapでドロップダウンメニューを作る＆JQueryでイベント処理

    <div class="btn-group">
      <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">ドロップダウン<span class="caret"></span></button>
      <ul id="pinlist" class="dropdown-menu">
        <li class="pinlist"><a href="#">メニュー1</a></li>
        <li class="pinlist"><a href="#">メニュー2</a></li>
        <li class="pinlist"><a href="#">メニュー3</a></li>
        <li class="pinlist"><a href="#">メニュー4</a></li>
      </ul>
    </div>

script部分

  <script>
    $(function(){
     $(document).on('click', "li.pinlist", function(){
      var index = $('li.pinlist').index(this);
      console.log(index + 'th item clicked!');
     });
     $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX1</a></li>'));
     $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX2</a></li>'));
     $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX3</a></li>'));
    });
  </script>

ちなみにJade

html
    head
        title aaa
        link(href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", rel="stylesheet")
        script(src="http://code.jquery.com/jquery-1.11.1.min.js")
        script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
        
    body
        .btn-group
            button.btn.btn-default.dropdown-toggle(type="button" data-toggle="dropdown")ドロップダウン<span class="caret"></span>
            ul.dropdown-menu#pinlist
                li.pinlist
                    a(href="#")メニュー1
                li.pinlist
                    a(href="#")メニュー2
                li.pinlist
                    a(href="#")メニュー3
                li.pinlist
                    a(href="#")メニュー4
    script.
        $(function(){
            $(document).on('click', "li.pinlist", function(){
                var index = $('li.pinlist').index(this);
                console.log(index + 'th item clicked!');
            });
            $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX1</a></li>'));
            $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX2</a></li>'));
            $("#pinlist").append($('<li class="pinlist"><a href="#">メニューXXX3</a></li>'));
        });