jQuery .on('click') events not firing after the DOM has been restructured

Question

I am building a gallery using Bootstrap's Grid. Each image in this gallery has a caption, and these captions can be searched. The grid re-structures after each search is made, to keep rows and columns lining up correctly. Each image within the gallery is also meant to be clickable to change it's state, and it's this last part that's stumping me - my code does not work after the grid has been rearranged (i.e. after a search has been performed).

JSFiddle

https://jsfiddle.net/7f3ax03m/

jQuery

function rowBreak(input) {
   $('.col-flex').hide();
   if (input) {
      $('.row').replaceWith(function() {
         return $(this).html();
      });
      $('.col-flex').wrapAll('<div class="row">');
   }
   $('.col-visible').each(function(i, e) {
      if (((i + 1) % 3 == 0) && ($(this).siblings().length != 2)) {
         var x = $('.col-visible:gt(' + i + ')');
         $('<div class="row">').append(x).insertAfter(this.closest('div.row'));
      }
   });
   $('.col-visible').show();
}

rowBreak(0);

$('#search').on('keyup', function() {
   $('.col-flex').removeClass('col-visible').hide();
   var s = $(this).val().toLowerCase();
   $('.col-flex').filter(function() {
      return $(this).find('h4').text().toLowerCase().indexOf(s) > -1;
   }).show().addClass('col-visible');
   rowBreak(s);
});

// Toggle selection of element
$('.panel-search').on('click', function() {
   $(this).toggleClass('panel-default').toggleClass('panel-success');
   $(this).find('.panel-body').toggleClass('bg-green');
});

HTML

<div class="container-fluid">
   <div class="form-group">
      <div class="input-group">
         <span class="input-group-addon">
            <i class="fa fa-search"></i>
         </span>
         <input class="form-control" id="search" type="text" placeholder="Search...">
      </div>
   </div>
   <div id="results">
      <div class="row">
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AEClim</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AEMET</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">AME</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">APMG</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">ATC Network</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">Meteomet</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">MMC 2016</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
         <div class="col-xs-4 col-flex col-visible">
            <div class="panel panel-default panel-search">
               <div class="panel-heading">
                  <h4 class="panel-title">Satcom 2016</h4>
               </div>
               <div class="panel-body">
                  <img class="img-responsive img-thumbnail" src="http://placehold.it/250x150">
               </div>
            </div>
         </div>
      </div>
   </div>
</div>