Question

“开始”和“重置”按钮触发输入字段文本更改导入时：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>

Answer 1

使用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将完全支持页面容器外的页面元素/小部件。

Answer 2

将表单标记更改为此。

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

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

为什么我的onsubmit事件处理程序只需要在重新加载页面之前工作一次？

2 个答案: