Ajax and events

Ajax and events

Hello,

So I've been looking around in regards to my problem, and though others seem to have the same issue,I am just not finding a solution.  So, I am hoping I can get a direct answer to help me out here.

End state: after executing Ajax, all jq events cease to function.  Below I have a test file (named test.php), to illustrate:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Page Title</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
  8. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  10. <style type="text/css">
  11. </style>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $('#alertbutton').bind('click', function(event){
  15. alert("test button clicked");
  16. });
  17. $("#ajaxbutton").click(function(){
  18. $.ajax({type:"post", url:"test.php", data:"test=1",
  19. success:function(data){
  20. alert("AJAX complete.");
  21. $.mobile.changePage( "test.php", {
  22. transition:"flip",
  23. changeHash:false,
  24. allowSamePageTransition:true,
  25. reloadPage:true
  26. });
  27. }
  28. });
  29. });
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div data-role="page">
  35. <div data-role="content">
  36. <button type="button" id="alertbutton">Alert() button</button>
  37. <button type="button" id="ajaxbutton">AJAX button</button>
  38. </div>
  39. </div>
  40. </body>
  41. </html>

With the above code, when I click "AJAX button", the page loads itself and jq events never fire again... at least, until I F5 the page.  I'm not sure what to do... this seems to be really bizarre and unproductive behavior.

If someone can help me out, I would be very grateful.

Thanks for your time,
Michael