We Keep Coding

Unable to capture clicks on Bootstrap 3 dropdown menu

I am trying to use bootstrap 3's dropdown functionality like a select menu. We will eventually be adding a lot of custom functionality, so we decided to use the dropdown menu instead of the actual select component. My issue is that I'm unable to capture clicks on the various menu items.
Here's my HTML:
<div class= "dropdown item-select" id="item-select-1">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
Select Item 1<span class="glyphicon glyphicon-menu-down"></span>
</button>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
and my Javascript:
$('#item-select-1 a').on('click', e => {
console.log('hello');
});
But nothing happens when a menu item is clicked; nothing is logged to the console. Am I overlooking something obvious? TIA!
EDIT: I've disabled all other Javascript except for the following. It might? be significant that the options are not hardcoded into the html; they're dynamically populated in response to the value of another dropdown:
$('#category-select').change(e => {
const opts = state.itemOptions[e.target.value];
$('.item-select ul').empty().append(opts);
$('#item-select-1 button').prop('disabled', false);
}
And the category selector is like this:
<select id="category-select" required="required" name="venue" class="form-control">
<option>Select Category</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
EDIT 2: Alright, so I ran an experiment. I enabled the dropdown on load and hardcoded some options:
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
And it worked. I guess the issue is the dynamically loaded options. So I guess I have to re-register the event handlers every time I repopulate the menu options?

Your code is correct.
Where is your JavaScript script located? Maybe it's not imported to your HTML file properly.

By binding the click handler to an element that is part of the initial load, I am able to capture the click. e.target will give me the exact option that was clicked on:
$('#venue-select-1 ul').on('click', e => {
console.log(e.target.innerText);
});

JQuery Selector not selecting anything.

I have some html
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
and this small js function which I am using to attempt to select this drop down menu and apply a key listener to. However I am having trouble getting this code below
$('.search-type').on('show.bs.dropdown', function () {
alert("I FINALLY FOUND YOU");
});
to run when the drop down is shown (clicked in this case). Do I need to wrap in this in an event listener listening for clicks? I have actually already tried this method but still could not get it to display this message or react in any way when the user clicked on the drop down. Based on what I have seen when I ran through this in the debugger, It never resolves the class selector, but this is just a guess. Is there something glaringly obvious I am missing or some weird bootstrap rule when using selectors?
Also I apologize if I am not giving enough info I am relatively new to this and am unsure of what is going on entirely.

See here for an answer: Process for using show.bs.dropdown in Bootstrap
Basically, the event is handled by the parent of the drop-down, not the drop-down itself. Also, BootStrap dropdowns are usually <ul>s. Here's an example of a standard drop-down with a handler:
HTML
<div class="btn-group" id="ddlWrap">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
JS
$('ddlWrap').on('show.bs.dropdown', function () {
alert('Found the dropdown wrapper!');
});

I think the events fire on the parent.So it should be the element above the .dropdown.So your code should be
<div class="btn-group" id="myDropdown">
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
</div>

Execute change method on select hidden

I have a list (menu) with values ​​when the user clicks to execute a function that changes the value of a select is hidden. This works fine, but does not display the information to be displayed by selecting the correct option from the select itself.
<ul>
<li class='active has-sub'><a href='#'><span>SELECCIONE</span></a>
<ul>
<li class='has-sub'><a id="S0001" href='#'><span>AUTO NUEVO</span></a>
</li>
<li class='has-sub'><a id="S0002" href='#'><span>Product 2</span></a>
</li>
</ul>
<script>
$("#S0001").click(function(){
$("#proyecto").val('S0001');
$("#proyecto").change.val();
});
</script>
This is the hidden select to have all the functionality
<div id="styledselect"><select name="proyecto" id="proyecto">
<option value='S0001'>AUTO NUEVO</option>
<option value='S0002'>CELEBRACIONES</option>
</select></div>
For this to work correctly, once I changed the value of the select should run the change event itself and charge the correct information.

You need to call the change event:
$("#proyecto").change()
Note: this will run the defined change handler, not the native functionality

Save State of Tab content when changing Route with angularjs and BootStrap Tabs

I have 3 tree bootstrap tabs in my angular application.
<ul class="nav nav-tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
and in my controller i change the route when changeRoute() called :
$scope.changeRoute = function(id){
$location.path('/tabs/'+id);
}
each tab have a same view and in view i have html select :
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
</select>
now when Route change new view come. i need when Route change browser or angular save the state of selected index of select in each view. so if in tab 1 user select item 1 in select then user click on tab 2 and change the select and then change the route to tab 1 user can see the item 1 selected in tab 1.
i create a small simulation of this scenario in plunker
this plunker is a simulation that what i want without changing route.but i have many thing in view and i think it is better to use route.

How to prevent dropdown menu in Boostrap from closing onclick

How do you prevent the dropdown menu class in Bootstrap from closing whenever a link inside is clicked?
I want users to select one of the class "type-of-visitors" and also be able to select one of the options in the select field without closing the dropdown menu.
& the "Go" button will be the one closing the menu.
<ul class="dropdown-menu">
<li>Total visitors</li>
<li>Paid visitors</li>
<li>Social media</li>
<li>Compare data
<select>
<option>Last month</option>
<option>Last week</option>
<option>Last 3 months</option>
</select>
</li>
<li>
Go
</li>
</ul>
Here's the jsfiddle to it: http://jsfiddle.net/stan255/cU6Y5/

There was a similiar question posted about this and the answer should suffice
"The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element."
Just add
$('.dropdown-menu').click(function(event){
event.stopPropagation();
});​