Question

我已经在这段代码上做了很多尝试，但它一直在搞乱。问题：

当你点击+/- 2时加上/减去而不是一个;由于某种原因，该方法被调用两次
当您点击提交时，+ / - 功能根本不再起作用

我找不到问题，在我向jquery-mobile提交错误之前，我首先想知道我是不是做了一些非常愚蠢的事情。

当我删除jquery-mobile .js文件时，一切都运行得很好，但是它不起作用。

提交网址后显示网址中的#bang，当它在那里时，它就会停止工作。

代码：

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="content">
<form method="post"> 
<a id="minus" href="#">-</a> 
<input type="text" id="value" name="days" value="1" /> 
<a id="plus" href="#">+</a> 
<script> 
$('#home').live('pagecreate',function(event){

    var valueElement = $('#value');
    function incrementValue(e){
        valueElement.val(Math.max(parseInt(valueElement.val()) + e.data.increment, 0));
        return false;
        }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

    });
</script> 
<input type="submit" value="submit" />
</div></div> 
</form></body></html>

编辑：更改它以更好地匹配移动框架，并在其中添加以下注释。修复问题一;该方法的双重调用，然而第二个问题;提交后停止工作。

菲尔的答案有效，奇怪的是，它的作用总是如此;

                                      var inputs = $("input[type='text']");

                                        for(i=0;i<inputs.length;i++) {
                                                if (inputs[i].getAttribute("id") == "value") {
                                                        inputs[i].value = currentValue;
                                                }
                                        }

如果我在目录中选择元素，则在提交后它不起作用;有谁知道这个的解释？

Answer 1

工作示例：

http://jsfiddle.net/phillpafford/trdYP/87/

JS：

var currentValue=1;

$("#minus, #plus").click(function(){
    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
    $('#value').val(currentValue);
});

HTML：

<div data-role="page" id="home"> 
    <div data-role="content">
        <a id="minus" href="#">-</a> 
        <input type="text" id="value" name="days" value="1" /> 
        <a id="plus" href="#">+</a>
    </div>
</div>

更新＃2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Increment</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" type="text/css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $('#home').live('pagecreate',function(event) { 
                var currentValue=1;
                $("#minus, #plus").click(function() {
                    currentValue = ($(this).attr('id')=='plus') ? currentValue + 1 : currentValue - 1;
                    $('input:text[id=value]').val(currentValue);
                });
            });

        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="content">
                <form id="theForm" method="post">
                    <a id="minus" href="#" data-role="button" data-inline="true">-</a>                    
                    <a id="plus" href="#" data-role="button" data-inline="true">+</a>
                    <br />
                    <input type="text" id="value" name="days" value="1" />
                    <input type="text" id="newvalue" name="days" value="100" />

                    <input type="submit" value="submit" />
                </form>
            </div>
        </div>

    </body>
</html>

Answer 2

您应该阅读jquery移动文档。 http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html

Jquery mobile不使用文档就绪，而是使用页面创建

$('#aboutPage').live('pagecreate',function(event){
  alert('This page was just enhanced by jQuery Mobile!');
});

另外，对于你的数学，你不能这样做..

 $('#plus').bind('click', function() {
    $("#value").val($("#value").val() + 1)
 });

奇怪的Jquery移动问题

2 个答案: