“开始”和“重置”按钮触发输入字段文本更改
导入时:jquery.mobile-1.3.0.min.js
我必须将按钮的页面重新加载到要重新触发的事件。
如果我只使用Jquery-1.8.2,它的效果非常好。
如何使用Jquery移动UI停止所需的重新加载?
我正在使用Firefox 19.02。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<form id='testform' action="#">
<fieldset>
<label for="timer">
<span>Event triggered</span>
<input type='text' name='triggered'>
</label>
</fieldset>
<fieldset>
<input value="Start" type="submit">
<input value="Reset" type="reset">
</fieldset>
</form>
<script type="text/javascript">
//bind a submit handler to the sample form
document.getElementById('testform').onsubmit = function()
{
$("input[name='triggered']").val("Start button clicked.");
// cancel the normal submit
return false;
};
document.getElementById('testform').onreset = function()
{
$("input[name='triggered']").val("Reset clicked.");
//cancel the normal rest
return false;
};
</script>
</body>
</html>
答案 0 :(得分:2)
使用jsFiddle示例:http://jsfiddle.net/Gajotres/GjU8e/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<form id='testform' action="#" data-ajax="false">
<fieldset>
<label for="timer">
<span>Event triggered</span>
<input type='text' name='triggered'/>
</label>
</fieldset>
<fieldset>
<input value="Start" type="submit"/>
<input value="Reset" type="reset"/>
</fieldset>
</form>
</div>
<script type="text/javascript">
// bind submit and reset event before page is shown
$(document).on('pagebeforeshow', '#index', function(){
//bind a submit handler to the sample form
$(document).on('submit', '#testform', function(){
$("input[name='triggered']").val("Submit button clicked.");
// cancel the normal submit
return false;
});
//bind a reset handler to the sample form
$(document).on('reset', '#testform', function(){
$("input[name='triggered']").val("Reset button clicked.");
// cancel the normal reset
return false;
});
});
</script>
</body>
</html>
很少有评论:
答案 1 :(得分:1)
将表单标记更改为此。
<form id='testform' action="#" data-ajax="false">
jQuery mobile正在尝试使用ajax提交您的表单。