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 event listener calling multiple times on dynamic list item

I am trying to setup an event listener using jQuery,that will be called when a user clicks on a item in a dynamically created list.
This issue that I am facing is that initially when I click on the item nothing happens. While it works fine the second time but each time after that it appears to recursively call itself. I believe that this may be due to the focus.
Here is the Html
<div id="routes_list">
<ul id="route_click">
<li id="route_1" value="1"> One </li>
<li id="route_2" value="2"> Two </li>
<li id="route_3" value="3">Three</li>
<li id="route_4" value="4"> Four </li>
</ul>
</div>
Here is the javascript
$(document).on('click', '#route_click', function() {
$('#route_click li').click(function(event) {
event.preventDefault();
console.log($(this).val());
});
})
You can try out this jsfiddle with the code.

The issue is caused by nesting event handlers.
When you first click an li, there's no event handler so it propagates up to the #route_click handler, which adds a click event handler.
Second click on the li runs the console.log handler, but then also propagates up to the wrapper which adds another handler, etc
As you're adding dynamic HTML (adding the HTML after the js runs) you can remove the "first" click and bind directly to the li (dynamically):
$(document).on('click', '#route_click li', function() {
console.log($(this).val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="routes_list">
<ul id="route_click">
<li id="route_1" value="1"> One </li>
<li id="route_2" value="2"> Two </li>
<li id="route_3" value="3">Three</li>
<li id="route_4" value="4"> Four </li>
</ul>
</div>

How to use click function with $(this) on children elements with the same class?

I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot

You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});

try to use JQuery Find
$(this).find('strong').text()

External JavaScript function editing HTML list title

All,
I am making a login page. Upon successful login, the username of the logged in user should display at the top of the screen. Upon clicking the username, a dropdown list should appear.
So I have an HTML script that will creates an un-ordered list. I want to make a call to an external javaScript function within the HTML. I want this function to edit the title of the un-ordered list with custom input handled in the javascript function, and make the list visible, as it is not displayed by default. How do I edit this script so I can call the function to create a custom title for my un-ordered list?
Javascript
function successfulLogin() {
$("#UserDropdown").show();
document.getElementById("loginMenu").innerHTML = "my stuff";
}
HTML
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div id="dropboxbackground">
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href="#">title</a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<header>
<div id="headerBar"></div>
</header>

Create a label inside the anchor tag and upon clicking the username call the successfulLogin javascript method using href='javascript:successfulLogin()' or depending upon the type of control you have used for displaying the username.
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href='#'><label id="lbl"> title
</label></a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
And Write your javascript(jquery) as : This would change the title of the ordered list to "somestuff"
function successfulLogin() {
$("#UserDropdown").show();
$('#lbl').text("somestuff");
}

Make the dropdown menu of bootstrap at top

I am using the dropdown menu component of twitter/bootstrap
And i have a timer countdown 10 minutes
I want to make dropdown menu show up (at top), and won't vanish even if user click the other place.
Only after user hovered that dropdown list, user can let it vanish by click other lace.
<li class="dropdown">
User Name
<ul class="dropdown-menu">
<li class="first" id = "mymenu">
setting
</li>
<li class="last">
sign_out
</li>
</ul>
</li>
How can i do that?
I had though about use event handler to prevent vanish even, but how can i do that?
Thanks for help!!