title: pure javascript: Why doesn't script loaded in ajax content work?
body: <p>This is the code I wrote:</p>
  
  <pre><code>function responseAjax(element, url, loader, data) {
      if(request.readyState == 4) {
          if(request.status == 200) {
              //The response has 2 main parts: the main page element and the javascript that have the text "???PHPTOSCRIPT???" in between
              output = request.responseText.split('???PHPTOSCRIPT???');
              if (element) document.getElementById(element).innerHTML = output[0];//put first part into element
              if (output[1] != "") eval(output[1]); //execute script
              //remember the last request
              if (typeof(url) !== 'undefined') {
                  document.cookie = "requestedURL=" + escape(url);
                  document.cookie = "requestedElement=" + escape(element);
                  document.cookie = "requestedLoader=" + escape(loader);
                  document.cookie = "requestedData=" + escape(data);
              };
          };
      };
  };
  
  function ajax(url, element, loader, data, remember, async) {
      remember = (typeof(remember) === 'undefined') ? false : remember;//remember last request. Default: false
      async = (typeof(async) === 'undefined') ? true : async;//handle request asynchronously if true. Default: true
  
      if (loader) document.getElementById(element).innerHTML = loader;
  
      try { request = new XMLHttpRequest(); /* e.g. Firefox */}
      catch(err) {
          try { request = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */}
          catch(err) {
              try { request = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */}
              catch(err) { request = false;}
          }
      }
  
      if (request) {
          url += "?r=" + parseInt(Math.random()*999999999);//handle the cache problem
          //put an array of data into string. Default: null array
          data = data || [];
          for (var i = 0; i &lt; data.length; i++) {
              url += "&amp;" + data[i];
          };
  
          request.open("GET", encodeURI(url), async);
  
          url = url.split('?');//get query string for remembered request
          request.onreadystatechange = (remember) ? function() {responseAjax(element, url[0], loader, data.join('&amp;'));}
                                                  : function() {responseAjax(element)};
  
          request.send(null);
      } else {
          document.getElementById(element).innerHTML = "&lt;h3&gt;Browser Error&lt;/h3&gt;";
      };
  };
  </code></pre>
  
  <p>Though I use <code>eval()</code> to handle returned script, the script doesn't work on events after all if I use pure javascript. However, if I use jQuery such as <code>$("#tab-panel").createTabs();</code>, this code works fine.</p>
  
  <p>Can someone please explain why pure javascript on the loaded content of ajax doesn't work?</p>
  
  <p>Additional information: As I said, pure javascipt such as <code>function</code> sent through the ajax content doesn't work on events, however another code such as <code>alert()</code> works fine.</p>