为什么jQuery下拉列表需要两次单击？

Question

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) {
    $('#div-konoce').html(data);
   });
   }
    else {
      $('#div-konoce').html('');
    }
  });            
});
</script>

EDIT:

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>

Answer 1

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.

Answer 2

you are not closing your input - it should be:

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

and I am not sure why you have this as an input and not a button, since it not used to gather information - but acts as a trigger fo the click.:

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

Answer 3

One tip is ,Why are you always emptying $('#div-konoce') , it will cause one ajax request per click . But if you only wrote the first if , it will show the previously loaded menu after the first click onwards .

 <div id = "div-konoce"></div>
   if ($('#div-konoce').html()=='') {
      $.get( "/2b/inc/ajax/db-lists/world/konoce.php", { name: "KonOce"     }, function(data) {
    $('#div-konoce').html(data);
   });