CODEWITHSUNDEEP
inputjquery-mobileclickjquery
Kiran
Kiran

Reputation: 5526

jquery input click function not triggering

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.

Upvotes: 2

Views: 1113

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85318

  • 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:

Upvotes: 1

Jorge
Jorge

Reputation: 18237

You cannot use $(document).ready in jquery mobile here's an documentation about it

Also here's an answer to a similiar question

Upvotes: 5

Related Questions