2

Start 和 Reset 按钮会触发输入字段文本的更改。
当我导入：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>
4

2 回答 2

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>

几点评论：

  • 不要在 jQuery 中使用 vanila java 脚本。它会工作，但代码看起来很脏。
  • 使用 jQuery Mobile 时，将代码包装在页面中。它可以在没有它的情况下工作，但不能完全正确。jQM 1.4 或 1.5 版将完全支持页面容器之外的页面元素/小部件。
于 2013-03-22T14:47:59.630 回答
1

将您的表单标签更改为此。

<form id='testform' action="#" data-ajax="false">

jQuery mobile 正在尝试使用 ajax 提交您的表单。

于 2013-03-22T14:29:37.007 回答