在用ajax調用替換列表後再次初始化jquery

我有一個Prestashop模塊來顯示來自不同產品類別的最新產品列表。在產品列表的頂部是菜單鏈接，如：ALL，CATEGORY 1，CATEGORY 2，CATEGORY 3等等。當頁面打開時，它顯示「所有」最新產品。但是當我點擊類別1時，它使用Ajax僅加載屬於我單擊的類別的產品。在用ajax調用替換列表後再次初始化jquery

我在模塊上實現了這個jquery插件 - https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/。

主要jQuery的文件grid.js的</body>結束前被加載，同時由</body>年底前也將下面的代碼初始化：當頁面剛打開

<script> 
    $(function() { 
     Grid.init(); 
    }); 
</script>

這種運作良好。但是，當任何類別的鏈接被點擊。該類別的產品已加載，但網格jquery擴展網格不再工作。

在該頁面的<head>內加載模塊的js文件，我注意到Ajax調用的類別與下面的代碼所做的：

$(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&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
      } 
     }); 
    });

我不很瞭解的jQuery所以我想知道如何讓各種類別的點擊和產品通過ajax加載時擴展預覽的工作。

來源

2017-02-16 atsngr

的

<script> 
$(function() { 
     Grid.init(); 
    }); 
</script>

是一次性的功能，你需要在你的成功的呼叫再次調用它像這樣

$(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&p=1&id_category='+$(this).attr('data-id'), 
      success: function(jsonData,textStatus,jqXHR) 
      { 
       $('#blocknewproducts1').html(''); 
       $('#blocknewproducts1').html(jsonData.blocknewproduct); 
       $('#blocknewproducts1').css('opacity', '1'); 
       $(function() { 
        Grid.init(); 
       }); 
      } 
     }); 
    });

來源

2017-02-16 08:39:04

其實我已經試過，但沒有奏效。我想這是因爲成功調用的代碼包含在頭部，而不是在展開預覽代碼所在的主體結束之前。我還將整個成功調用代碼複製到主體的最後，添加了像上面那樣的功能，但它也不起作用。 – atsngr

這可能聽起來很愚蠢，但是否可以插入上面建議的代碼，以便只會在原始代碼的末尾觸發該代碼的某個方面？ – atsngr

nope，你需要重新觸發的事件需要放在代碼的成功回調中，你可以嘗試使用一個函數然後調用它。 –

在用ajax調用替換列表後再次初始化jquery

回答

相關問題