重构DOM后，jQuery .on（'click'）事件未触发

Question

我正在使用Bootstrap的Grid构建一个库。此图库中的每个图像都有一个标题，可以搜索这些标题。每次搜索后网格都会重新构建，以保持行和列正确排列。图库中的每个图像也可以点击以更改它的状态，这是最后一部分让我感到难过 - 我的代码在网格重新排列后（即在执行搜索后）不起作用。

的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>