I have this fiddle that works nicely. So when I click on one of the list items in the menu I get an alert telling me which item was clicked.
However, in my actual application nothing happens when I click on a list item and to me, it looks exactly the same?
// get list of strategies
var $regions = $('#regionList');
$.ajax({
type: 'GET',
url: 'api/Region',
dataType: 'json',
success: function(codes) {
$.each(codes, function(i, code) {
$regions.append('<li id="' + code + '">' + code + '</li>');
});
},
error: function() {
alert("Error loading data! Please try again");
}
});
$("#regionList li").click(function() {
alert('Clicked ' + this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="dropdown">
<button class="dropbtn">Strategy</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>