Delay

by sramam

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <div data-role="page" id="user_config" class="type-interior">
        <div data-role="header" data-position="fixed">
            <a href="#users" data-icon="back" data-iconpos="notext">Back</a>
            <h1>User Settings</h1>
        </div>
        <div class="ui-content" data-role="content">
            <div class="content-primary">
                <form id="user_config_form">
                    <div data-role="fieldcontain">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" value="" data-theme="b"/>
                    </div>
                    <h4 class="monitor_query">Time limit usage of YouTube access for this account?</h4>
                    <div data-role="fieldcontain">
                        <label for="monitor" class="ui-input-text">Time Tracking</label>
                        <select name="monitor" id="monitor" data-native-menu="false" data-theme="a">
                            <option value="disable">Disabled</option>
                            <option value="enable">Enabled</option>
                        </select>
                    </div>
                    <div class="monitored_settings">
                        <div class="demographic_info">
                            <p>This information helps Ceeko personalize your child's experience.<br/> Optional, but recommended. Our <a href="/privacy">Privacy Policy</a></p>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup" data-type="horizontal">
                                    <legend>Birthday</legend>
                                    <label for="dob_month">Month</label>
                                    <select name="dob_month" id="dob_month"...

JavaScript

function display_opts() { 
    $('#log').html('state:' + $('#monitor').val())
  if($('#monitor').val() === 'enable') {
    $('.monitored_settings').show()
    $('#log').html('visible')
  } else {
    $('.monitored_settings').hide()
    $('#log').html('hidden')
  }
}

$('#monitor').live('change', display_opts)

$(document).bind('pageinit', function(e,data) {
    $('#monitor').live('change', display_opts)
    display_opts() 
})
    
$(function() {
    display_opts() 
});