JQuery функция щелчка ввода не запускается - PullRequest
Новая
       17

JQuery функция щелчка ввода не запускается

2 голосов
/ 24 января 2012

Я попытался изменить сценарий на следующий, и он все еще не вызывает событие .. я что-то упустил? 

$('#page1').live('pageshow',function(event) { 
        $("#radioyes").click(function(){
            $("p").hide();
        });
});

Я также пытался pagebeforecreate, но результат тот же ..: (

Я пробую простую мобильную страницу jquery и тестирую на Chrome Portable. Однако в следующем коде событие щелчка ввода не работает там, где работает нажатие кнопки. Я также пробовал "input#radioyes" как "div>fieldset>input#radioyes" и до сих пор не работает. 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Background check </title> 

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="images/touch-icon-iphone.png" /> 
    <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png" /> 
    <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone4.png" /> 

    <script type="text/javascript" src="jQuery/jquery.js"></script>
    <script type="text/javascript" src="jQuery/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="jQuery/jquery.mobile.min.css" />

    <!-- JQuery Date Picker components -->
    <link rel="stylesheet" href="jQuery/jquery.ui.datepicker.mobile.css" /> 
    <script src="jQuery/jQuery.ui.datepicker.js"></script>
    <script src="jQuery/jquery.ui.datepicker.mobile.js"></script>  

    <link rel="stylesheet" href="css/folo.css" />

    <script type="text/javascript">  

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").click(function(){
        $("p").hide();
    });
});
    </script>  
</head> 

<body > 

<div data-role="page" id="page1" data-theme="a" data-title="PAGE1">
    <div data-role="header">
        <h1>"PAGE1"</h1>
    </div><!-- /header -->

    <div data-role="content" >  
    <p> Welcome. </p>

    <div id="SSN">
        <label for="basic">SSN:   </label>
        <input name="ssn" id="textSSN" value="" data-theme="a" />
    </div>
    <div id="first">     
        <label for="first">First Name:</label>     
        <input name="input_first" id="input_first" value="" data-theme="d" /> 
    </div> 
    <div id="last">     
        <label for="last">Last Name:</label>     
        <input name="input_last" id="input_last" value="" data-theme="d" /> 
    </div> 

    <button id="btn1">Click me</button>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-role="fieldcontain">
            <legend>Have you used other last name?</legend>

            <input type="radio" name="radio-choice" id="radioyes" value="yes" />
            <label for="radioyes">Yes</label>
            <input type="radio" name="radio-choice" id="radio-no" value="No"  checked="checked" />
            <label for="radio-no">No</label>
        </fieldset>

    <div id="otherlast">
        <label for="otherlast">Other Last Name:</label>     
        <input name="input_otherlast" id="input_otherlast" value="" data-theme="d" /> 
    </div> 

    </div>


   <div id="dob">            
        <label for="date">Date Of Birth:</label>         
        <input type="date" class="datepicker" name="date" id="my_date" value="01/19/1975" text="01/19/1975" />     
    </div>

    </div><!-- /content -->


</div><!-- /page -->
</body>
</html>
</html>

Цените любую помощь. Версия Jquery 1.7.1 1.6.4 загружена, и jquery mobile является последней версией.

Ответы [ 2 ]

5 голосов
/ 24 января 2012

Вы не можете использовать $(document).ready в jquery mobile вот документация об этом

Также вот ответ на похожий вопрос

1 голос
/ 24 января 2012
  • jQM 1.0 не поддерживает jQuery 1.7.x, пожалуйста, используйте jQuery 1.6.4 ( Source )
  • jQM использует pageInit (), а не $ (document) .ready () ( Источник )

Также jQM добавляет дополнительную разметку на вашу страницу, так что $("p").hide(); может скрываться, как и ожидалось, но дополнительная разметка все еще может быть видна.Я бы предложил использовать id для элементов span

ОБНОВЛЕНИЕ:

Попробуйте это 

$('#page1').live('pageshow',function(event) { 
    $("#radioyes").bind( "change", function(event, ui) {
        $("p").hide();
    });
});

Live Пример:

Документы для радио событий:

...