Warum benötigt das jQuery-Dropdown zwei Klicks?

Question

Wenn ich auf die Schaltfläche "Kontinente & Ozeane" klicke, erscheint eine Dropdown-Liste - aber nur, wenn ich zweimal auf die Schaltfläche klicke. Ich möchte, dass es mit dem ersten Klick funktioniert.

Ist mit meinem Code etwas nicht in Ordnung, oder muss ich etwas hinzufügen, damit das Dropdown-Menü beim ersten Klick angezeigt wird?

Dies ist eine jQuery-Funktion, aber es enthält auch mein erstes Experiment mit AJAX, also ist das vielleicht das 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:

überarbeitet ich meinen Code pro Antwort unten. Es dauert jedoch immer noch zwei Klicks, um das Dropdown zu öffnen.

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

Answer 1

Ihre Linie:

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

prüft, ob die "div-konoce" div ist leer, aber es ist nicht:

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

es einen Raum gibt es ... nicht '' Bedeutung == den Raum

entfernen und versuchen Sie es erneut.

Answer 2

Sie schließen nicht Ihre Eingabe - es sein sollte:

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

und ich bin nicht sicher, warum Sie dies als eine Eingabe haben und nicht eine Schaltfläche, da sie Informationen nicht verwendet zu sammeln - sondern fungiert als Auslöser fo der Klick .:

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

Answer 3

Ein Tipp ist, warum leeren Sie immer $('#div-konoce'), wird es eine Ajax-Anfrage pro Klick verursachen. Wenn Sie aber nur die erste if geschrieben haben, wird nach dem ersten Klick das zuvor geladene Menü angezeigt.

<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); 
    });