WordBear WordBear - 5 months ago 18x
Javascript Question

Why does jQuery dropdown require two clicks?

When I click on the button labeled "Continents & Oceans," a dropdown list appears - but only if I click on the button twice. I'd like it to work with the first click.

Is there something wrong with my code, or do I need to add something to make the dropdown drop down on the first click?

This is a jQuery function, but it also includes my first experiment with AJAX, so maybe that's the problem.

<input type = "button" id = "konoce" value = "Continents &amp; Oceans" class="btn btn-konoce"
<div id = "div-konoce"> </div>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#konoce").click(function(event) {
if ($('#div-konoce').html() == '') {
$.get( "/2b/inc/ajax/db-lists/world/konoce.php", { name: "KonOce" }, function(data) {
else {


I revised my code per the answer below. However, it still takes two clicks to open the dropdown.

<button type = "button" id = "konoce" class="btn btn-konoce">Continents &amp; Oceans</button>
<div id = "div-konoce" style="margin: 0 -5px;"> </div>


Your line:

if ($('#div-konoce').html() == '')

checks if the "div-konoce" div is empty, but it's not:

<div id = "div-konoce"> </div>

There's a space there... meaning not == ''

Remove the space and try again.