用选定的下拉文本替换下拉按钮文本

Question

我知道之前已经问过这个问题 - 一个答案让我想到了这个JSFiddle，这就是我想要的，但它在我的导航栏中不起作用。选定的下拉文本不会替换下拉按钮（类别）。如果有人可以请指出我做错了什么？谢谢！

的Javascript

$('.dropdown-select').on( 'click', '.dropdown-menu li a', function() { 
   var target = $(this).html();

   //Adds active class to selected item
   $(this).parents('.dropdown-menu').find('li').removeClass('active');
   $(this).parent('li').addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).parents('.dropdown-select').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
});

HTML

<template name="header">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="/">REVUME</a>
          </div>
            <ul class="nav navbar-nav">
              <li class="home"><a href="/">Home</a></li>
                <li class="dropdown dropdown-select">
                    <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" href="#">CATEGORIES <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="digital_art">DIGITAL ART</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="drawing">DRAWING</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="graphic_design">GRAPHIC DESIGN</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="illustration">ILLUSTRATION</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="painting">PAINTING</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="photography">PHOTOGRAPHY</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="ui_ux">UI/UX</a></li>
                    </ul>
                </li> 
            </ul>            
              <ul class="nav navbar-nav navbar-right"> 
                {{> loginButtons align="right"}}
              </ul>
      </div>
  </nav>
</template>