Script tags not loading after ajax call

Script tags not loading after ajax call

I'm using the Ajaxify/history.js but I have a serious issue. After it loads content through ajax, or simply when I change page with pushState(), scripts are not loaded.

myscript.js
  1. $(document).ready(function()
  2. {
  3. $("div").click(function() { // this works everytime
  4. alert("Test");
  5. });

  6. $(".mydiv").click(function() // this only works on the first real reload (F5) but after a page change with pushstate/ajaxify/history it does not work anymore.
  7. {
  8. alert("Test");
  9. });
  10. });
I'm starting to suspect, because the code hasn't been updated in years, that it's simply outdated. But I'd really like to use this and would love it if someone could come up with an explanation to why it's causing the script tags not to work, and how to fix it.

ajaxify-html5.js
  
  1. // Ajaxify
  2. // v1.0.1 - 30 September, 2012
  3. // https://github.com/browserstate/ajaxify
  4. (function(window,undefined){
  5. // Prepare our Variables
  6. var
  7. History = window.History,
  8. $ = window.jQuery,
  9. document = window.document;

  10. // Check to see if History.js is enabled for our Browser
  11. if ( !History.enabled ) {
  12. return false;
  13. }

  14. // Wait for Document
  15. $(function(){
  16. // Prepare Variables
  17. var
  18. /* Application Specific Variables */
  19. contentSelector = '#content,article:first,.article:first,.post:first',
  20. $content = $(contentSelector).filter(':first'),
  21. contentNode = $content.get(0),
  22. $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
  23. activeClass = 'active selected current youarehere',
  24. activeSelector = '.active,.selected,.current,.youarehere',
  25. menuChildrenSelector = '> li,> ul > li',
  26. completedEventName = 'statechangecomplete',
  27. /* Application Generic Variables */
  28. $window = $(window),
  29. $body = $(document.body),
  30. rootUrl = History.getRootUrl(),
  31. scrollOptions = {
  32. duration: 800,
  33. easing:'swing'
  34. };
  35. // Ensure Content
  36. if ( $content.length === 0 ) {
  37. $content = $body;
  38. }
  39. // Internal Helper
  40. $.expr[':'].internal = function(obj, index, meta, stack){
  41. // Prepare
  42. var
  43. $this = $(obj),
  44. url = $this.attr('href')||'',
  45. isInternalLink;
  46. // Check link
  47. isInternalLink = url.substring(0,rootUrl.length) === rootUrl || url.indexOf(':') === -1;
  48. // Ignore or Keep
  49. return isInternalLink;
  50. };
  51. // HTML Helper
  52. var documentHtml = function(html){
  53. // Prepare
  54. var result = String(html)
  55. .replace(/<\!DOCTYPE[^>]*>/i, '')
  56. .replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
  57. .replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
  58. ;
  59. // Return
  60. return $.trim(result);
  61. };
  62. // Ajaxify Helper
  63. $.fn.ajaxify = function(){
  64. // Prepare
  65. var $this = $(this);
  66. // Ajaxify
  67. $this.find('a:internal:not(.no-ajaxy)').click(function(event){
  68. // Prepare
  69. var
  70. $this = $(this),
  71. url = $this.attr('href'),
  72. title = $this.attr('title')||null;
  73. // Continue as normal for cmd clicks etc
  74. if ( event.which == 2 || event.metaKey ) { return true; }
  75. // Ajaxify this link
  76. History.pushState(null,title,url);
  77. event.preventDefault();
  78. return false;
  79. });
  80. // Chain
  81. return $this;
  82. };
  83. // Ajaxify our Internal Links
  84. $body.ajaxify();
  85. // Hook into State Changes
  86. $window.bind('statechange',function(){
  87. // Prepare Variables
  88. var
  89. State = History.getState(),
  90. url = State.url,
  91. relativeUrl = url.replace(rootUrl,'');

  92. // Set Loading
  93. $body.addClass('loading');

  94. // Start Fade Out
  95. // Animating to opacity to 0 still keeps the element's height intact
  96. // Which prevents that annoying pop bang issue when loading in new content
  97. $content.animate({opacity:0},800);
  98. // Ajax Request the Traditional Page
  99. $.ajax({
  100. url: url,
  101. success: function(data, textStatus, jqXHR){
  102. // Prepare
  103. var
  104. $data = $(documentHtml(data)),
  105. $dataBody = $data.find('.document-body:first'),
  106. $dataContent = $dataBody.find(contentSelector).filter(':first'),
  107. $menuChildren, contentHtml, $scripts;
  108. // Fetch the scripts
  109. $scripts = $dataContent.find('.document-script');
  110. if ( $scripts.length ) {
  111. $scripts.detach();
  112. }

  113. // Fetch the content
  114. contentHtml = $dataContent.html()||$data.html();
  115. if ( !contentHtml ) {
  116. document.location.href = url;
  117. return false;
  118. }
  119. // Update the menu
  120. $menuChildren = $menu.find(menuChildrenSelector);
  121. $menuChildren.filter(activeSelector).removeClass(activeClass);
  122. $menuChildren = $menuChildren.has('a[href^="'+relativeUrl+'"],a[href^="/'+relativeUrl+'"],a[href^="'+url+'"]');
  123. if ( $menuChildren.length === 1 ) { $menuChildren.addClass(activeClass); }

  124. // Update the content
  125. $content.stop(true,true);
  126. $content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */

  127. // Update the title
  128. document.title = $data.find('.document-title:first').text();
  129. try {
  130. document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; ');
  131. }
  132. catch ( Exception ) { }
  133. // Add the scripts
  134. $scripts.each(function(){
  135. var $script = $(this), scriptText = $script.text(), scriptNode = document.createElement('script');
  136. if ( $script.attr('src') ) {
  137. if ( !$script[0].async ) { scriptNode.async = false; }
  138. scriptNode.src = $script.attr('src');
  139. }
  140. scriptNode.appendChild(document.createTextNode(scriptText));
  141. contentNode.appendChild(scriptNode);
  142. });

  143. // Complete the change
  144. if ( $body.ScrollTo||false ) { $body.ScrollTo(scrollOptions); } /* http://balupton.com/projects/jquery-scrollto */
  145. $body.removeClass('loading');
  146. $window.trigger(completedEventName);
  147. // Inform Google Analytics of the change
  148. if ( typeof window._gaq !== 'undefined' ) {
  149. window._gaq.push(['_trackPageview', relativeUrl]);
  150. }

  151. // Inform ReInvigorate of a state change
  152. if ( typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined' ) {
  153. reinvigorate.ajax_track(url);
  154. // ^ we use the full url here as that is what reinvigorate supports
  155. }
  156. },
  157. error: function(jqXHR, textStatus, errorThrown){
  158. document.location.href = url;
  159. return false;
  160. }
  161. }); // end ajax

  162. }); // end onStateChange

  163. }); // end onDomLoad

  164. })(window); // end closure