在用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

回答

相关问题