Question

我有这段代码：

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

这个javascript是从here采用的，其作用是在点击img时显示虚拟键盘：

$('‪#‎map‬').keyboard({
layout: 'custom',
customLayout: {
'default': [ 
    '\u0192(h):lower_case_function_(type_h) \n\
    \u0393(h):lower_case_gamma_(type_h) \n\
    \u0394(h):lower_case_delta_(type_h)\n\ 
',
'{shift} {accept} {cancel}'
],
'shift': [
    '\u03C6(h):lower_case_phi_(type_h) \n\
    \u03C7(h):lower_case_chi_(type_h) \n\
    \u03C8(h):lower_case_psi_(type_h) \n\ 
',
'{shift} {accept} {cancel}'
]
},
usePreview: false,
openOn:null
})
.addTyping();
$('‪#‎click‬').click(function() {
$('#map').getkeyboard().reveal();
});

他们工作正常。但是，

问题是第二次点击img时，它不会隐藏虚拟键盘。我想要的是当点击img时，会出现键盘。再次单击（两次）时，键盘会消失。当它第三次点击时，键盘会重新出现。

我该怎么做？我已经google了这个问题，仍然不知道该怎么做。感谢..

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

解决

$("#click").toggle(
    function()
    {
        $('#map').getkeyboard().reveal();
    },
    function() {
        $('#map').getkeyboard().close();
    });

Answer 1

你可以使用jquery切换

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

只需将代码粘贴到应该处理奇数次点击事件的第一个函数中并在第二个函数中粘贴代码，以处理偶数次点击它会起作用

Answer 2

如果第一次点击后HTML正在更改，则第二次无效：

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

尝试使用jquery .on（），因为当元素在DOM中时，点击工作。

在表单中添加ID：

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

或只是：

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

Jquery .on()

第一次触发两者，但第二次只触发.on（）。

Jsfiddle

第二次点击时，JavaScript无法正常工作

2 个答案: