title: Initialize jquery again after replacing list with ajax call
body: <p>I have a Prestashop module to display a list of latest products from different product categories. On top of the list of products are menu links like: ALL, CATEGORY 1, CATEGORY 2, CATEGORY 3, etc. When page opens, it displays "All" the latest products. But when I click on Category 1 for instance, it uses Ajax to load only products belonging to the category I clicked.</p>
  
  <p>I implemented this jquery plugin on the module - <a href="https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/" rel="nofollow noreferrer">https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/</a>.</p>
  
  <p>The main jquery file grid.js is loaded before the end of the <code>&lt;/body&gt;</code> and initialize by adding the code below before the end of the <code>&lt;/body&gt;</code> too:</p>
  
  <pre><code>&lt;script&gt;
     $(function() {
        Grid.init();
     });  
  &lt;/script&gt;
  </code></pre>
  
  <p>This works well when the page is just opened. But when any of the category links are clicked. The products for that category are loaded but the grid jquery expanding grid does not work again.</p>
  
  <p>In the js file for the module loaded within the <code>&lt;head&gt;</code> of the page, I noticed that the ajax call for the categories are made with the code below:</p>
  
  <pre><code>$(document).on('click','#list-category-new-product li a',function(e){
          $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html());
          $('#blocknewproducts1').css('opacity', '0.7');
          e.preventDefault();
          $.ajax({
              type: 'POST',
              headers: { "cache-control": "no-cache" },
              url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php',
              async: true,
              cache: false,
              dataType : "json",
              data: 'ajax_new_product=1&amp;p=1&amp;id_category='+$(this).attr('data-id'),
              success: function(jsonData,textStatus,jqXHR)
              {
                  $('#blocknewproducts1').html('');
                  $('#blocknewproducts1').html(jsonData.blocknewproduct);
                  $('#blocknewproducts1').css('opacity', '1');
              }
          });
      });
  </code></pre>
  
  <p>I don't know much about jquery so I am wondering how I can get the expanding preview to work when the various categories are clicked and products loaded via ajax.   </p>