Странные Jquery-мобильные проблемы - PullRequest
Новая
       0

Странные Jquery-мобильные проблемы

2 голосов
/ 09 августа 2011

Я много пробовал с этим кодом, но он продолжает портиться. Проблемы:

  • при нажатии +/- 2 добавляется / вычитается вместо одного; почему-то метод вызывается дважды
  • когда вы нажимаете кнопку отправить, функция +/- просто больше не работает

Я не могу найти проблему, и прежде чем отправлять сообщение об ошибке в jquery-mobile, я бы сначала хотел узнать, не делаю ли я что-то очень глупое.

Когда я удаляю jquery-mobile .js файл, все работает отлично, но с ним не работает.

После отправки URL-адреса показывается #bang в URL-адресе, и когда он появляется, он перестает работать

Код: 

<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;
                                                }
                                        }

Если я выберу каталог, элемент не будет работать после отправки; Кто-нибудь знает объяснение этого?

Ответы [ 2 ]

2 голосов
/ 09 августа 2011

Рабочий пример:

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>
1 голос
/ 09 августа 2011

Вы должны прочитать мобильную документацию 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)
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...