javascript jQuery Mobile：为什么 onClick 和 onKeyPress 事件不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16818875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile: Why are onClick and onKeyPress events not working?
提问by user1448031
In my jQuery Mobile code, I have some onClick and onKeyPress events but they are not firing. I am converting my client's website to a mobile version that includes lot of javascript functions. I don't know if it works if I convert everything into jQuery but I prefer not to do so and would like to keep the javascript functions as it is.
在我的 jQuery Mobile 代码中，我有一些 onClick 和 onKeyPress 事件，但它们没有触发。我正在将我客户的网站转换为包含大量 javascript 功能的移动版本。如果我将所有内容都转换为 jQuery，我不知道它是否有效，但我不想这样做，并且希望保持 javascript 函数的原样。
Is there a way to make this work entirely with javascript and not with jQuery?
有没有办法完全使用javascript而不是jQuery来完成这项工作？
onClick="javascript:alert('test');"seems to work fine. It's just the functions that are not being called.
onClick="javascript:alert('test');"似乎工作正常。这只是没有被调用的函数。
http://jsfiddle.net/jetlag/CtkTV/1/
http://jsfiddle.net/jetlag/CtkTV/1/
HTML:
HTML：
<div data-role="fieldcontain">
<label for="textA">Input A</label>
<input class="inputField" id="textA" value="" type="text" onFocus="javascript:clearText(this);" value="This is default text A" />
</div>
<div data-role="fieldcontain">
<label for="textB">Input B</label>
<input class="inputField" id="textB" value="" type="text" onKeyPress="javascript:keyPressEvent(e);" onFocus="javascript:clearText(this);" value="This is default text B" />
</div>
<div class="ui-grid-b">
<div class="ui-block-a"><input type="button" id="goButton" onClick="javascript:goButtonPress();" value="Go" />
</div>
<div class="ui-block-b"><input type="button" id="testButton" onClick="javascript:alert('Alerted!');" value="Alert" />
</div>
</div>
Javascript:
Javascript：
function keyPressEvent(e) {
var evt = e || window.event;
var keyPressed = evt.which || evt.keyCode;
if (keyPressed == 13) {
document.getElementById('goButton').click();
evt.cancel = true;
}
}
function goButtonPress() {
alert('Button Pressed");
}
采纳答案by PSL
There is no eit should be eventin your markup. i.e javascript:keyPressEvent(event)
没有e它应该event在您的标记中。IEjavascript:keyPressEvent(event)
<input class="inputField" id="textB" value="" type="text" onKeyPress="javascript:keyPressEvent(event);" onFocus="javascript:clearText(this);" value="This is default text B" />
Also Your quotes are at wrong:-
另外你的报价是错误的：-
function goButtonPress() {
alert('Button Pressed"); <-- here quotes should match
}
Fiddle
小提琴
See events
查看活动
回答by Gajotres
Working example: http://jsfiddle.net/Gajotres/aLB6T/
工作示例：http: //jsfiddle.net/Gajotres/aLB6T/
While there's nothing wrong with inline java script you should not use it when working with jQuery Mobile. Because of its architecture it can cause big problems. That is why if possible use classic jQuery.
虽然内联 java 脚本没有任何问题，但在使用 jQuery Mobile 时不应使用它。由于其架构，它可能会导致大问题。这就是为什么尽可能使用经典的 jQuery。
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#testButton', function(){
alert('Alerted!');
});
$(document).on('click', '#goButton', function(){
alert('Button Pressed');
});
$(document).on('keypress', '#textB, #textA', function(evt){
var keyPressed = evt.which || evt.keyCode;
alert(keyPressed);
if (keyPressed == 13) {
document.getElementById('goButton').click();
evt.cancel = true;
}
});
});
