Home/ Questions/Q 7091337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T08:10:21+00:00

I tried changing the script to the following and it still doesn’t trigger the

  • 0

I tried changing the script to the following and it still doesn’t trigger the event.. am I missing something?

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

I also tried pagebeforecreate but the result is the same.. 🙁

I am trying a simple jquery mobile page and testing on chrome portable. However, in the following code, the input click event isn’t working where as button click works. I also tried "input#radioyes" as "div>fieldset>input#radioyes" and still doesnt work.

<!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>

Appreciate any help.. The version of Jquery is 1.7.1 1.6.4 downloaded and the jquery mobile is the latest version.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • jQM 1.0 does not support jQuery 1.7.x please use jQuery 1.6.4 ( Source )
    • jQM uses pageInit(), not $(document).ready() ( Source )

    Also jQM adds additional markup to your page so $("p").hide(); might be hiding as expected but the additional markup might still be visible. I would suggest using an id for the span elements

    UPDATE:

    Try this

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

    Live Example:

    Docs for Radio Events:

    • 0