jQuery在ajax调用后停止工作

I use bootstrap and a clock picker from http://weareoutman.github.io/clockpicker/

It works fine when I load the main page. But when I load new content from another php file into a div using AJAX call, clockpicker stops working.

Clockpicker use jQuery at the bottom of the page.

The new content which I load with ajax contains the clockpicker button as well. But it won't work. Is there something wrong with the jQuery at the bottom of the page maybe?

I'm new on jQuery and don't know the syntax nor the language.

<?PHP

echo "<div class=\"input-group clockpicker col-md-6\" data-placement=\"right\" data-align=\"top\" data-autoclose=\"true\">";
  echo "<input 
    type=\"text\" 
    class=\"form-control input-sm\" onchange=\"ajax_function('kuk','alter_schedule.php?ltime='+this.value+'&cid=".$child_id."&date=".$row['date']."&what=3')\" value=\"".date("H:i", strtotime($row['schedule_start']))."\">";
  echo "<span class=\"input-group-addon\">";
    echo "<span class=\"glyphicon glyphicon-time\"></span>";
  echo "</span>";
echo "</div>";

?>

<script type="text/javascript">

$('.clockpicker').clockpicker();

</script>

jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use event delegation, bubbling events from newly added items up to a point in the DOM that was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.