使JavaScript在第二次单击时无法工作

我有以下代码：

<form method="get" >
   <input type="text" name="keyword" id="map">
   <img src="style/keyboard.png" id="click"/>
   <button type="submit">Search</button> 
</form> 

他们工作得很好。 但是,

问题是当第二次单击

img

时，它不会隐藏虚拟键盘。我想要的是当点击

img

时，键盘出现。再次单击（两次）时，键盘消失。第三次单击时，键盘会重新出现

我该怎么做？ 我在谷歌上搜索了这个问题，但仍然不知道该怎么办。 谢谢

编辑： *使用@Arjun Vachhani的答案解决*

---

如果HTML在第一次单击后发生更改，则第二次单击时将不起作用：

$('‪#‎click‬').click(function() {...

尝试使用jquery.on（），因为当元素在DOM中时，单击会起作用

将Id添加到表单中：

$("‪form#myform‬").on("click","img#‎click",function() {...

或者只是：

 $("‪form").on("click","img#‎click",function() {...

第一次触发两者，但第二次只有.on（）起作用

---

您可以使用jquery切换

$("#id").toggle(
     function () 
     {
          alert("action 1");
     },
     function () {
          alert("action 2");
     });

只需将代码粘贴到第一个函数中，该函数将处理奇数个单击事件 并将代码粘贴到第二个函数中，该函数处理偶数次单击

---

它会工作的

你在使用一些插件吗？是的，一些jquery插件。这是链接（查看来源：）显示的内容。我按照你说的做了，但现在虚拟键盘甚至在第一次单击时都没有出现（我在最后添加了一个示例。它应该可以工作，有一个未关闭的标记：第一次您的id名称不正确，我重新键入了它们，在小提琴工作后。尝试一下。我这样做了

$（'‪#‎点击‬').切换（函数（）{$（'#映射'）.getkeyboard（）.reveal（）；}，函数（）{$（'#映射'）.getkeyboard（）.close（true）；}）

但仍然不起作用。所有单击都不起作用。~.~嘿，你可能会更改html内容或更改侦听器。你可以在close中找到“what do true in close means？”的活例子。IDK，我只是按照教程中的解释来做。我理解了你的答案。谢谢：）我会更新问题。

 $("‪form").on("click","img#‎click",function() {...

$("#id").toggle(
     function () 
     {
          alert("action 1");
     },
     function () {
          alert("action 2");
     });