//= require jquery
//= require dataTables/jquery.dataTables
//= require_tree .

$(function() {
  $("table").dataTable({
    "aaSorting": [[3, "desc"]],
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "bSortable": false }
    ]
  });

  $('.mail a.preview').on('click', function() {
    console.log(this);
    $(this).colorbox({width:"80%", height:"80%", iframe:true});
  });

  $('.mail a.raw').on('click', function(){
    $.get($(this).attr('href'), function(data){
      $('#raw div').text(data);
    });
    return false;
  });
});

//= require jquery
//= require dataTables/jquery.dataTables
//= require_tree .

$(function() {
  $(document).on('click', '.mail a.preview', function() {
    console.log(this);
    $(this).colorbox({width:"80%", height:"80%", iframe:true});
  });

  $(document).on('click', '.mail a.raw', function(){
    $.get($(this).attr('href'), function(data){
      $('#raw div').text(data);
    });
    return false;
  });

  $("table").dataTable({
    "aaSorting": [[3, "desc"]],
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "bSortable": false }
    ]
  });

});

Use the document object and a selector so the events are bound to dynamically created objects.
Use the document object and a selector so the events are bound to dynamically created objects.
