title: Reloading jQuery Colorbox after pulling data with AJAX
body: <p>I'm using on my page both colorbox jQuery plugin and AJAX for the asyncronous page loading.</p>
  
  <p>After I pull something from a .php file with AJAX, the content of that .php file doesn't works with colorbox.</p>
  
  <pre><code>$('a.boxed').colorbox({rel: 'Galleria'});
  $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"});
  </code></pre>
  
  <p>These are the only two rows that I have in my .js file for colorbox (I correctly imported the plugin because it works on other elements not loaded from AJAX). I wanted to create an image that once clicked, opens me a colorbox iframe using this code:</p>
  
  <pre><code>&lt;a href="MYURL" class="iframe"&gt;&lt;img src="IMGURL"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>When I click a button on my webpage I use the following code to reload with AJAX:</p>
  
  <p>function showPage(page) {
      var xmlhttp = new XMLHttpRequest(); // Creo variabile XMLHttpRequest per il caricamento asincrono con AJAX</p>
  
  <pre><code>xmlhttp.onreadystatechange = function() {
      document.getElementById("post-title").innerHTML = page;
      document.getElementById("post-content").innerHTML = xmlhttp.responseText;
  }
  
  xmlhttp.open("GET", page + ".php", true);
  xmlhttp.send();
  </code></pre>
  
  <p>}</p>
  
  <p>I read around that I should use the live() method, but I found that with jQuery is deprecated and now there is the on() method.. what a confusion! Could someone help me?</p>