.on not working.. and if i change the sequence , the other code is not working

.on not working.. and if i change the sequence , the other code is not working

Dear All

  2. <script type="text/javascript">
  3. $(document).ready(function() { 
  4. $('#searchtable  tr').hover(function() {
  5. $(this).addClass('hover');
  6. }, function() {
  7. $(this).removeClass('hover');
  8. });
  9. ///////////////////////////////////////////// 
  10. $('[id^="fname"]').click(function() {
  11. var thisid=this.id;
  12.  
  13. alert(thisid);
  15. });
  16. ///////////////////////////////////////////// 
  17. $('[id^="ob"]').click(function() {
  18. var thisid=this.id;
  19.  
  20. var recid=thisid.split('ob');
  21.   var url= "officebearerdivfill.php";
  22. data = {
  23.  
  24.  id: recid[1]
  25. }
  26.  
  27. $('#officebearerdiv').load(url,data)  ;
  29. });
  30. /////////////////////////////////////////////      
  31.  
  32.  
  33. $('#officebearerdiv').on( "click", ".officeb", function() { 
  34. alert("SS");
  35.  
  36.  });  
  37.   
  38. });   
  39. </script> 

Command
  1. $('#officebearerdiv').on( "click", ".officeb", function() { 
not working
if i change the sequence

put 
  1. $('#officebearerdiv').on( "click", ".officeb", function() { 
  2. alert("SS");
  3.  
  4.  });  
 on top
and my code becomes
  2. $('#searchtable  tr').hover(function() {
  3. $(this).addClass('hover');
  4. }, function() {
  5. $(this).removeClass('hover');
  6. });
  7. ///////////////////////////////////////////// 
  8. $('#officebearerdiv').on( "click", ".officeb", function() { //<<<<< new position of  code 
  9. alert("SS");
  10.  
  11.  });  
  12. ////////////////////////////////////////////////  
  13. $('[id^="fname"]').click(function() {
  14. var thisid=this.id;
  15.  
  16. alert(thisid);
  18. });
  19. ///////////////////////////////////////////// 
  20. $('[id^="ob"]').click(function() {
  21. var thisid=this.id;
  22.  
  23. var recid=thisid.split('ob');
  24.   var url= "officebearerdivfill.php";
  25. data = {
  26.  
  27.  id: recid[1]
  28. }
  29.  
  30. $('#officebearerdiv').load(url,data)  ;
  32. });
  33. //////////////////////////////////
then code
  2. $('[id^="ob"]').click(function() {
  3. var thisid=this.id;
  4.  
  5. var recid=thisid.split('ob');
  6.    var url= "officebearerdivfill.php";
  7. data = {
  8.   
  9.   id: recid[1]
  10. }
  11.   
  12. $('#officebearerdiv').load(url,data)  ;
  14. });
is not working

whats wrong with the code ?