为什么jQuery下拉式需要两次点击？

当我点击标有“Continents & Oceans”的按钮时，会出现一个下拉列表 - 但只有当我点击按钮两次。我希望它能够在第一次点击时工作。为什么jQuery下拉式需要两次点击？

我的代码有什么问题吗？还是需要添加一些内容才能使第一次点击下拉下拉？

这是一个jQuery函数，但它也包括我的第一个AJAX实验，所以也许就是这个问题。

<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>

编辑：

我修改每下面的答案我的代码。但是，仍然需要两次点击才能打开下拉菜单。

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

来源

2016-05-05 WordBear

改变这条线在你的代码，如果格是空的，你只得到了以下的内容

- 但它有一个空格字符，因此不为空 – gavgrif

你行：

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

个

检查是否 “DIV-konoce” 格是空的，但它不是：

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

有有一个空格...这意味着没有== ''

删除空格，然后再试一次。

来源

2016-05-05 00:56:53 Webomatik

好拾音器@Webomatik – gavgrif

你也可以使用['trim']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim），以保证安全。 –

你不关闭你的输入 - 它应该是：

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

，我不知道为什么你有这样的作为输入而不是一个按钮，因为它不是用来收集信息 - 但作为一个触发FO点击：

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

来源

2016-05-05 00:53:33 gavgrif

我相信使用输入之间的区别元素和按钮元素是一个按钮元素允许您将非文本元素放在标签上。如果标签只是文字，我认为没有其他重要的区别。 – AgentME

哇，我不知道我是如何忘记关闭标签的。关于将其从输入更改为按钮的提示Thx。我试图将此标记为正确的答案，但我还没有足够的分数。坏消息：它仍然需要两次点击来打开下拉菜单。也许在我的代码中有其他地方存在bug。 – WordBear

嘿 - 看看Webomatik的答案 - 你正在比较一个非空的div到一个空值 - 在此之后应该很好 – gavgrif

一个提示是，为什么你总是清空$('#div-konoce')，它会导致一次ajax请求每次点击。但是如果您只写了第一个if，它会在第一次点击之后显示之前加载的菜单。

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

来源

2016-05-05 00:58:50 Sachin

为什么jQuery下拉式需要两次点击？

回答

相关问题