load event not triggering

load event not triggering

Hi, I'm loading the div successfully but it is not showing the alert message on load. I want to set click event on the input field which is inside this div. Please somebody help me. .
  1. Here's my code.
  2. <form method="post" id="frm">
      <select id="opt">
      <option value="1">Controlled</option>
      <option value="2">With Notification</option>
      <option value="3">Periodically</option>
      <option value="4">Simple</option>
      
      </select>
      </form>
      <div>
      </div>
      <script src="js/jquery.ui.core.js"></script>
     <script src="js/jquery.ui.widget.js"></script>
     <script src="js/jquery.ui.datepicker.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
      <script> 
     

        $("select").change(function () {
              var str = "";
              $("select option:selected").each(function () {
                    str += $(this).val() ;
                  });
              $.post("option.php",{data:str},
        function(data){
        $("div").addClass('datepicker').html(data);
        //alert(data);
      }
      );
      
            });
        
    $('div.datepicker').load(function(){
        $('.cal').click(function(){
        alert('hello');
    });
        
       });
    </script>






































  3. and her is my php code
  4. <?php
    $val=$_POST['data'];
    switch($val){
    case 1:
        echo "<input class='cal' type='text' value='$val'/>";
        break;
    case 2:
        echo "<input id='cal' type='text' value='$val'/>";
        break;
       
    default:
        echo $val;
        break;
        }