timepicker event handler fails on second ajax call

timepicker event handler fails on second ajax call

I have an issue getting the event handler that loads the timedatepicker after it has been added and then removed via function calls. The div it is in is dynamically loaded via .append() triggered from a check box. When the check box is checked, the div is added and visible. When it is unchecked, the div is removed via .remove(). After being removed, checking the check box a second time loads the input boxs correctly but the timedatepicker does not load on focus.  This happens regardless is the timedatepicker is used or not.  If it is removed via the .remove() when the check box is unchecked then it is dysfunctional when brought up again.   Have tried on.() in numerious configurations, with the timedatepicker and the containing div.  Tried adding the javascript to the called function, in the main page where the ajax is returned etc.  That did not seem to make any difference.  Where am I going wrong?

This is the code that holds form that is called via JavaScript, from timedateajax.php
<div class='reportorderbyoptions'>
    <script type='text/javascript' src='../jquery/ui.custom.js' ></script>
    <script type='text/javascript' src='../jquery/timepicker-addon.js' ></script>
    <link rel='stylesheet' type='text/css' href='../css/lightness/custom.css' />
    <link rel='stylesheet' type='text/css' href='../css/timepicker.css' />
        <div>   
            <form>
            <table>
                <th>
                    Set Date / Time
                </th>
                <tr>
                    <td>
                        Start date/time
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='text' id='startdatetimeinput' name='startdatetimeinput' value='' autocomplete='off' />
                    </td
                </tr>
                <tr>
                    <td>
                        End date/time
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type='text' id='enddatetimeinput' name='enddatetimeinput' value='' autocomplete='off' />
                    </td>
                </tr>
            </table>
            </form>
        </div>
        <script>
            var startinput = $('#startdatetimeinput');
            var endinput = $('#enddatetimeinput');
            startinput.datetimepicker({
                clikcInput:true               
            });
            endinput.datetimepicker({
                clikcInput:true               
            });
        </script>
    </div>       












































This is the  checkbox code and associated JavaScript. 

input type='checkbox' id='timedate'  name='timedate' value='timedate'/>

This is the event listener code

 
 $('#timedate').on('change', function(){
       if($('#timedate').is(':checked')){                   
             timeAppend();                       
            }      else {
                   timeRemove();                    
             }
       });






This is the code containing the referenced functions
function timeAppend() {      
      $("#reportoptions2").css('visibility','visible')
        .append(
            "<div id='reportoptions2time'></div>"
        );
  $.ajax({
            type: 'POST',
            url: '../pagesajaxcalls/timedateajax.php',
            cache: false,
            success: function(returned) {
                $('#reportoptions2time').html(returned);
            }    
    });

 }
function timeRemove() {
    $('#reportoptions2time').remove();
}

















Thanks,

Ed